a.tab-item.active {
  color: #2cc17b; }
a.tab-item i.icon::before {
  display: inline-block;
  content: ' ';
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat; }
a.tab-item .wf-home-on::before {
  background-image: url('img/tab/home-on.png'); }
a.tab-item .wf-home-off::before {
  background-image: url('img/tab/home-off.png'); }
a.tab-item .wf-area-on::before {
  background-image: url('img/tab/area-on.png'); }
a.tab-item .wf-area-off::before {
  background-image: url('img/tab/area-off.png'); }
a.tab-item .wf-my-on::before {
  background-image: url('img/tab/my-on.png'); }
a.tab-item .wf-my-off::before {
  background-image: url('img/tab/my-off.png'); }

#air-controller {
  background: #fff; }
  #air-controller .name {
    height: 44px;
    margin: 0 16px;
    margin-bottom: 2px;
    font-size: 18px;
    font-weight: 400;
    text-align: center; }
    #air-controller .name span {
      line-height: 44px;
      white-space: nowrap;
      display: inline-block;
      width: 100%; }
  #air-controller .item-container {
    height: 280px; }
    #air-controller .item-container .air-container {
      padding: 10px 16px;
      height: 280px;
      color: #fff; }
      #air-controller .item-container .air-container .button {
        color: #fff;
        margin: 0;
        padding: 0;
        background: #323232;
        border-radius: 20px; }
      #air-controller .item-container .air-container .left {
        width: 40%;
        float: left; }
      #air-controller .item-container .air-container .right {
        margin-left: 10%;
        width: 50%;
        float: left; }
        #air-controller .item-container .air-container .right .show {
          background: #2cc17b;
          position: relative;
          height: 100px;
          border-radius: 20px; }
      #air-controller .item-container .air-container .margin {
        margin-top: 6px; }
      #air-controller .item-container .air-container .up {
        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#909ca9), to(#485973)); }
        #air-controller .item-container .air-container .up img {
          width: 20px; }
      #air-controller .item-container .air-container .down {
        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#485973), to(#909ca9)); }
        #air-controller .item-container .air-container .down img {
          width: 20px; }

#area {
  background-color: #f5f5f5;
  padding: 16px; }
  #area .sense {
    font-size: 18px;
    margin-top: 16px;
    margin-left: 2.5%;
    width: 30%;
    height: 44px;
    float: left;
    background: #2cc17b !important;
    color: #fff !important;
    border-radius: 20px; }
  #area p {
    padding-left: 12px;
    color: #282828; }
  #area .btndev {
    background-color: #2cc17b;
    color: #282828;
    border: none; }

#area-device {
  background-color: #e5e5e5; }
  #area-device .device {
    margin-top: 15px;
    height: 40px;
    font-size: 22px; }
    #area-device .device span {
      position: relative;
      color: white;
      left: 25px;
      top: 5px; }
  #area-device .area-container {
    padding: 5px 16px; }
    #area-device .area-container .title-text {
      color: #2cc17b;
      font-weight: bold;
      font-size: 20px; }
    #area-device .area-container .area {
      color: #282828;
      padding-left: 16px; }
      #area-device .area-container .area .one-line {
        padding: 5px 5px; }
        #area-device .area-container .area .one-line img {
          padding-right: 16px;
          height: 15px;
          vertical-align: text-top; }
        #area-device .area-container .area .one-line .on {
          -webkit-transform: rotate(90deg);
                  transform: rotate(90deg); }
      #area-device .area-container .area .count {
        float: right;
        padding-right: 16px; }
      #area-device .area-container .area .attr {
        padding-left: 16px;
        margin-top: 5px; }
  #area-device .no-device-message {
    padding: 20px 20px 0;
    height: 50px;
    text-align: center;
    font-size: 18px;
    color: #282828;
    line-height: 30px; }
    #area-device .no-device-message a {
      color: #2cc17b;
      text-decoration: underline; }
  #area-device .light-bg-div {
    margin: 20px 20px 0 20px; }

#area-manage {
  background-color: #e5e5e5; }
  #area-manage .ion-plus-circled, #area-manage .ion-minus-circled, #area-manage .ion-record {
    padding-right: 16px;
    color: #282828;
    font-size: 20px;
    height: 44px;
    line-height: 44px; }
  #area-manage .area-div {
    width: 100%;
    height: auto;
    background-color: white; }
  #area-manage .father-list {
    color: #282828; }
    #area-manage .father-list .list {
      z-index: 12;
      margin-top: 16px;
      position: relative;
      padding: 0 16px;
      border: 0;
      width: 100%;
      height: auto; }
    #area-manage .father-list .item-content {
      display: inline-block;
      width: 100%;
      height: 54px;
      padding: 0; }
    #area-manage .father-list .item-border .item-content {
      border-bottom: 1px solid #ccc !important; }
    #area-manage .father-list .item {
      border: 0;
      height: 54px; }
      #area-manage .father-list .item .name {
        color: #282828;
        height: 54px;
        line-height: 54px;
        font-size: 18px;
        display: inline-block; }
    #area-manage .father-list .ion-ios-plus-empty {
      position: absolute;
      top: 0;
      padding: 0 !important;
      right: 0;
      width: auto;
      text-align: right;
      height: 54px;
      line-height: 54px;
      color: #2cc17b !important;
      font-size: 40px !important; }
  #area-manage .child-list .list {
    color: #282828;
    margin-top: 0;
    width: 100%;
    height: auto; }
  #area-manage .child-list .item:last-child .item-content {
    border-bottom: none !important; }
  #area-manage .child-list .ion-ios-arrow-right {
    position: absolute;
    top: 0;
    padding: 0 !important;
    right: 0;
    width: auto;
    text-align: right;
    height: 54px;
    line-height: 54px;
    font-size: 32px !important; }
  #area-manage .child-list .area-type {
    position: relative;
    display: inline-block;
    float: left;
    min-width: 30px;
    height: 54px;
    margin-right: 10px;
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: 30px 30px; }
  #area-manage .child-list .item {
    border: none !important;
    height: 54px;
    margin-right: 16px;
    margin-left: 24px; }
  #area-manage .child-list .item-content {
    float: left;
    border-bottom: 1px solid #ccc !important;
    width: 100%;
    height: 54px;
    line-height: 54px;
    padding: 0; }
  #area-manage ion-content {
    padding: 0 16px; }

.popup-area-type {
  width: 100%;
  height: 40px;
  font-size: 18px; }
  .popup-area-type span {
    display: inline-block;
    border: 0;
    margin: 0;
    height: inherit; }
  .popup-area-type .select-side {
    width: 20%;
    float: left;
    padding: 10px 0;
    text-align: center;
    line-height: 20px; }
  .popup-area-type .select-middle {
    width: 60%;
    float: left;
    padding: 10px 0;
    text-align: center;
    line-height: 20px;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    background-position: 20px 0;
    padding-left: 70px; }

#board-controller {
  background: #fff;
  position: relative; }
  #board-controller .control-container {
    padding-top: 20px; }
    #board-controller .control-container div {
      text-align: center; }
  #board-controller .name {
    height: 44px;
    margin: 0 16px;
    border-bottom: 1px solid #f0f0f0; }
    #board-controller .name span {
      font-size: 18px;
      display: inline-block;
      line-height: 44px;
      height: 44px; }
    #board-controller .name .ion-ios-gear-outline {
      position: absolute;
      right: 0px;
      top: 0;
      padding: 0;
      margin: 0;
      height: 44px;
      min-height: 44px;
      width: 44px;
      font-size: 30px;
      color: #323232 !important; }
  #board-controller .button-switch {
    background: #2cc17b;
    padding: 10px;
    width: 38%;
    margin-left: 8%;
    margin-bottom: 20px;
    min-width: 80px;
    min-height: 50px;
    border-radius: 10px; }
    #board-controller .button-switch span {
      display: block;
      padding-left: 26px;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      background-position: 0 center;
      height: 28px;
      line-height: 28px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #fff; }

#board-setting-view {
  background-color: #e5e5e5;
  padding: 16px; }
  #board-setting-view ion-content {
    padding: 0 !important;
    overflow-y: visible; }
  #board-setting-view .head-button {
    font-size: 22px; }
  #board-setting-view .init-btn {
    background-image: url('img/board-setting/init_ico.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px 30px; }
  #board-setting-view .button:after {
    position: relative; }
  #board-setting-view .spread-div {
    position: absolute;
    left: 0;
    z-index: 12;
    width: 100%;
    height: 46px;
    padding: 10px 0;
    font-size: 18px;
    color: #333;
    background-color: white;
    border-bottom: 1px solid #999;
    text-align: center; }
  #board-setting-view .button-init {
    position: absolute;
    right: 8px;
    top: 0;
    padding: 0;
    margin: 0;
    min-height: 40px; }
  #board-setting-view .bd-pickup {
    height: 42px !important;
    margin: 0 16px !important; }
  #board-setting-view .control-container {
    background: #fff;
    height: auto;
    margin: 16px;
    border-radius: 3px;
    border: 3px solid #2cc17b;
    padding: 20px 0;
    overflow: hidden; }
    #board-setting-view .control-container div {
      text-align: center; }
  #board-setting-view .button-switch {
    background: #2cc17b;
    color: white !important;
    border-radius: 3px;
    padding: 10px;
    width: 38%;
    margin-left: 8%;
    margin-bottom: 20px;
    min-width: 80px;
    min-height: 50px; }
    #board-setting-view .button-switch span {
      background-image: url('img/board-setting/white_set_icon.png');
      background-size: 28px 28px;
      background-repeat: no-repeat;
      padding-left: 28px;
      display: block;
      height: 28px;
      line-height: 28px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
  #board-setting-view .choosed {
    background-color: #333 !important; }
  #board-setting-view .dis-spread {
    position: absolute;
    right: 10px;
    top: 0;
    padding: 8px 10px 8px 10px;
    font-size: 16px !important;
    width: 52px;
    height: 56px;
    border-radius: 3px;
    background-color: #36353a;
    color: white; }
  #board-setting-view .setting-div {
    width: 100%;
    height: auto;
    position: relative; }
    #board-setting-view .setting-div .setting-board {
      width: 100%;
      min-height: 300px; }
    #board-setting-view .setting-div .one-line {
      width: 100%;
      height: 60px;
      border: 1px solid #c9c9c9;
      background-color: white;
      margin-bottom: 20px; }
      #board-setting-view .setting-div .one-line input {
        position: relative;
        text-align: center;
        top: 12px;
        font-size: 16px;
        margin-left: 30%;
        width: 40%;
        height: 36px;
        line-height: 36px;
        border: 1px solid #104E8B; }
      #board-setting-view .setting-div .one-line option {
        border-radius: 0; }
    #board-setting-view .setting-div .go-to {
      width: 40%;
      margin-top: 0;
      margin-left: 30%;
      margin-bottom: 20px; }
    #board-setting-view .setting-div .button-go {
      display: inline-block;
      -webkit-box-shadow: 0 1px 5px;
              box-shadow: 0 1px 5px;
      background: #35363a;
      padding: 10px;
      width: 100%;
      height: 50px;
      margin: 0; }
      #board-setting-view .setting-div .button-go span {
        display: block;
        height: 28px;
        line-height: 28px; }
  #board-setting-view .areas-list {
    width: 100%;
    height: auto;
    clear: both;
    overflow: hidden;
    background-color: white; }
    #board-setting-view .areas-list .area-name {
      position: relative;
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding-left: 10%;
      font-size: 16px;
      background-color: #c0f1d2;
      border-bottom: 1px solid #ccc; }
      #board-setting-view .areas-list .area-name img {
        position: absolute;
        top: 11px;
        right: 40px;
        width: 28px;
        height: 28px; }
    #board-setting-view .areas-list .scenes-list {
      width: 100%;
      clear: both;
      overflow: hidden;
      height: auto;
      background-color: #999999; }
  #board-setting-view .double-div {
    height: 50px;
    overflow: hidden;
    float: left;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999; }
    #board-setting-view .double-div .check-span {
      display: inline-block;
      border-radius: 0;
      height: 50px;
      line-height: 50px; }
  #board-setting-view .func-choosed {
    background-color: #2cc17b !important;
    color: white !important; }
  #board-setting-view .buttons-div {
    width: 100%;
    padding: 10px 0;
    height: auto;
    border: 1px solid #c9c9c9;
    background-color: white;
    margin-bottom: 20px; }
  #board-setting-view .triple-div {
    height: 44px;
    padding: 4px; }
  #board-setting-view .button-func {
    background-color: #282828;
    border-radius: 16px;
    padding: 4px 5px;
    width: 100%;
    min-height: 32px;
    min-width: 90px;
    height: 36px; }
    #board-setting-view .button-func span {
      font-size: 14px !important;
      color: white;
      font-weight: 500;
      background-size: 20px 20px;
      background-position: 2px center;
      background-repeat: no-repeat;
      padding-left: 24px;
      display: block;
      height: 28px;
      line-height: 28px; }
  #board-setting-view .device-scene-list {
    width: 100%;
    height: auto;
    clear: both;
    overflow: hidden; }
    #board-setting-view .device-scene-list .device-scene-name {
      position: relative;
      width: 100%;
      height: 50px;
      font-size: 16px;
      line-height: 50px;
      padding-left: 10%;
      background-color: #c0f1d2; }
      #board-setting-view .device-scene-list .device-scene-name img {
        position: absolute;
        top: 11px;
        right: 40px;
        width: 28px;
        height: 28px; }
    #board-setting-view .device-scene-list .triple-div {
      height: 50px;
      float: left;
      overflow: hidden;
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      padding: 0; }
      #board-setting-view .device-scene-list .triple-div .check-span {
        display: inline-block;
        border-radius: 0;
        height: 50px;
        line-height: 50px; }
    #board-setting-view .device-scene-list .devices-list {
      width: 100%;
      clear: both;
      overflow: hidden;
      height: auto;
      background-color: #eee; }
  #board-setting-view .order-div {
    width: 100%;
    padding: 10px 0;
    margin-bottom: 20px; }
    #board-setting-view .order-div textarea {
      resize: none;
      position: relative;
      margin-left: 10%;
      width: 80%;
      padding: 10px;
      color: white;
      border-radius: 5px;
      background-color: #2cc17b;
      line-height: 30px; }
  #board-setting-view .save {
    width: 100%;
    background-color: #104E8B;
    color: white;
    border-radius: 3px;
    height: 50px;
    line-height: 50px;
    text-align: center; }
  #board-setting-view .cancel {
    margin-top: 20px;
    width: 100%;
    background-color: white;
    color: black;
    border-radius: 3px;
    height: 50px;
    line-height: 50px;
    text-align: center; }
  #board-setting-view .checked-span {
    background-image: url('img/check-span/green_check.png') !important; }
  #board-setting-view .sec-color {
    background-color: #2cc17b !important; }
  #board-setting-view .btn-div {
    margin-top: 40px;
    width: 100%;
    height: 50px;
    margin-bottom: 40px; }
    #board-setting-view .btn-div .save-btn, #board-setting-view .btn-div .cancel-btn {
      width: 40%;
      margin: 0 6% 0 4%;
      padding: 0 30px 0 50px;
      line-height: 50px;
      height: inherit;
      border-radius: 25px;
      border: 0;
      float: left;
      background-position: 25px center;
      background-repeat: no-repeat;
      background-size: 25px 25px; }
    #board-setting-view .btn-div .save-btn {
      background-color: #2cc17b;
      background-image: url('img/board-setting/save_ico.png');
      color: white; }
    #board-setting-view .btn-div .cancel-btn {
      background-color: #888;
      color: white;
      background-image: url('img/board-setting/cancel_ico.png'); }
  #board-setting-view h2 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 18px;
    color: #282828;
    font-weight: 500; }
  #board-setting-view .name-div .name-ipt {
    background-color: #2cc17b;
    color: white;
    text-align: center;
    border-radius: 5px;
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    width: 60%;
    font-size: 18px;
    margin: 10px 0 10px 20%;
    height: 40px;
    line-height: 40px; }
  #board-setting-view .func-div, #board-setting-view .orderbd-div, #board-setting-view .name-div {
    padding: 10px;
    border-radius: 3px; }
  #board-setting-view .scenebd-div, #board-setting-view .devicebd-div {
    padding-top: 10px;
    border-radius: 3px 3px 0 0; }
  #board-setting-view .func-div, #board-setting-view .name-div, #board-setting-view .scenebd-div, #board-setting-view .devicebd-div, #board-setting-view .orderbd-div {
    margin: 20px 5%;
    width: 90%;
    background-color: white;
    border: 1px solid #e0e0e0;
    height: auto; }

.platform-ios.platform-cordova #drop-menu {
  top: 74px; }

#drop-menu {
  width: 50vw;
  height: auto;
  border-radius: 0 !important;
  background-color: #2cc17b;
  padding: 0 4.63333vw;
  z-index: 70;
  top: 54px;
  left: initial;
  right: 0;
  margin-top: 0;
  margin-left: 0;
  opacity: 1; }
  #drop-menu .popover-arrow {
    display: none; }
  #drop-menu .icon {
    float: left;
    width: 6.48148vw;
    height: 6.48148vw;
    margin: 3.33333vw 0; }
  #drop-menu .item {
    border-width: 0 0 1px 0;
    background-color: #2cc17b;
    color: #FFFFFF;
    font-size: 4.44444vw;
    height: 13.14815vw;
    line-height: 13.14815vw;
    margin: 0;
    padding: 0 0 0 0; }
  #drop-menu .text {
    margin-left: 0; }
  #drop-menu .icon + .text {
    margin-left: 17.59259vw; }

.quadruple-div {
  display: inline-block;
  position: relative;
  border: 0;
  margin: 0;
  width: 25%; }

.triple-div {
  display: inline-block;
  position: relative;
  border: 0;
  margin: 0;
  width: 33.2%; }

.double-div {
  display: inline-block;
  position: relative;
  border: 0;
  margin: 0;
  width: 50%; }

.check-span {
  background-color: #fff;
  color: #323232;
  background-image: url('img/check-span/63_uncheck.png');
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 10px center;
  display: inline-block;
  width: 100%;
  height: 32px;
  text-align: left;
  padding-left: 44px;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.checked-span {
  background-image: url('img/check-span/63_check.png') !important; }

.reg-line {
  height: 36px;
  line-height: 36px;
  padding-left: 16px;
  font-size: 20px;
  color: white;
  background-color: #555;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666; }

.bg-title {
  font-weight: 400;
  font-size: 20px;
  color: white;
  text-align: center; }

.bg-board {
  padding: 10px 0;
  margin: 0 0 20px; }

.header-more {
  position: relative;
  width: 21px;
  height: 44px;
  float: right;
  background-position: center;
  background-size: 21px;
  background-repeat: no-repeat;
  background-image: url(img/3point_white.png); }

.bar-calm .button {
  border-color: #2cc17b;
  background-color: #2cc17b; }

.platform-ios.platform-cordova .bar.bar-calm {
  height: 74px !important; }

.bar {
  height: 54px; }

.bar .title {
  height: 54px;
  line-height: 54px;
  font-size: 24px; }

.platform-android.platform-cordova .bar .title {
  height: 54px;
  line-height: 54px;
  font-size: 24px; }

.has-header {
  top: 54px; }

.button.activated, .bar-calm .button.activated, .bar-calm .button.active {
  background: transparent;
  border-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: 0.3; }

.button-clear {
  max-height: inherit; }

.bar .buttons > .button {
  min-height: 44px;
  line-height: 44px;
  min-width: 44px;
  font-size: 34px; }
  .bar .buttons > .button img {
    width: 24px; }

.bar .buttons > .ion-chevron-left {
  font-size: 26px; }

.container {
  margin-top: 16px; }
  .container .title-text {
    margin: 0;
    font-size: 20px;
    color: #c0c0c0; }

ion-content {
  padding: 0px; }

.scroll-bar-indicator {
  background: inherit !important;
  background-color: inherit !important; }

.text-one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.popover-backdrop.active {
  background-color: transparent; }

.button {
  min-height: 44px; }

.bar.bar-footer {
  background-color: rgba(36, 41, 47, 0.8); }

.button.button-positive {
  background-color: #2cc17b;
  border-color: #2cc17b; }

.operate-title {
  width: 100%;
  height: 40px;
  position: relative;
  padding: 0;
  background-color: white; }
  .operate-title .oleft, .operate-title .oright {
    position: absolute;
    width: 15%;
    top: 0;
    height: 40px;
    border: none;
    margin: 0;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    color: #2cc17b;
    text-overflow: ellipsis; }
    .operate-title .oleft span, .operate-title .oright span {
      display: block;
      width: 100%;
      font-size: 24px;
      height: inherit;
      text-align: center; }
  .operate-title .oleft {
    left: 0; }
  .operate-title .oright {
    right: 0; }
  .operate-title .oname {
    width: 70%;
    margin: 0 auto;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    color: #282828;
    text-overflow: ellipsis; }
  .operate-title .button {
    -webkit-box-shadow: none;
            box-shadow: none;
    border: none;
    background-color: transparent;
    min-height: 0;
    padding: 0; }
  .operate-title .button:after {
    position: relative; }
  .operate-title .activated {
    opacity: 0.5; }
  .operate-title .oleft span {
    border-right: 1px solid white; }

.bar .title {
  font-size: 20px; }

a {
  color: #000;
  text-decoration: none; }

.title {
  font-size: 34pt; }

.platform-ios.platform-cordova .has-header {
  top: 64px !important; }

.tab-nav {
  background-color: white;
  height: 52px;
  padding: 4px 0; }

.border-bottom {
  border-bottom: solid 1px; }

.col-1 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 1%;
  -moz-flex: 0 0 1%;
  flex: 0 0 1%;
  　max-width: 1%; }

.col-2 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 2%;
  -moz-flex: 0 0 2%;
  flex: 0 0 2%;
  　max-width: 2%; }

.col-3 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 3%;
  -moz-flex: 0 0 3%;
  flex: 0 0 3%;
  　max-width: 3%; }

.col-4 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 4%;
  -moz-flex: 0 0 4%;
  flex: 0 0 4%;
  　max-width: 4%; }

.col-5 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 5%;
  -moz-flex: 0 0 5%;
  flex: 0 0 5%;
  　max-width: 5%; }

.col-6 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 6%;
  -moz-flex: 0 0 6%;
  flex: 0 0 6%;
  　max-width: 6%; }

.col-7 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 7%;
  -moz-flex: 0 0 7%;
  flex: 0 0 7%;
  　max-width: 7%; }

.col-8 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 8%;
  -moz-flex: 0 0 8%;
  flex: 0 0 8%;
  　max-width: 8%; }

.col-9 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 9%;
  -moz-flex: 0 0 9%;
  flex: 0 0 9%;
  　max-width: 9%; }

.col-10 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 10%;
  -moz-flex: 0 0 10%;
  flex: 0 0 10%;
  　max-width: 10%; }

.col-11 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 11%;
  -moz-flex: 0 0 11%;
  flex: 0 0 11%;
  　max-width: 11%; }

.col-12 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 12%;
  -moz-flex: 0 0 12%;
  flex: 0 0 12%;
  　max-width: 12%; }

.col-13 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 13%;
  -moz-flex: 0 0 13%;
  flex: 0 0 13%;
  　max-width: 13%; }

.col-14 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 14%;
  -moz-flex: 0 0 14%;
  flex: 0 0 14%;
  　max-width: 14%; }

.col-15 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 15%;
  -moz-flex: 0 0 15%;
  flex: 0 0 15%;
  　max-width: 15%; }

.col-16 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 16%;
  -moz-flex: 0 0 16%;
  flex: 0 0 16%;
  　max-width: 16%; }

.col-17 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 17%;
  -moz-flex: 0 0 17%;
  flex: 0 0 17%;
  　max-width: 17%; }

.col-18 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 18%;
  -moz-flex: 0 0 18%;
  flex: 0 0 18%;
  　max-width: 18%; }

.col-19 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 19%;
  -moz-flex: 0 0 19%;
  flex: 0 0 19%;
  　max-width: 19%; }

.col-20 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 20%;
  -moz-flex: 0 0 20%;
  flex: 0 0 20%;
  　max-width: 20%; }

.col-21 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 21%;
  -moz-flex: 0 0 21%;
  flex: 0 0 21%;
  　max-width: 21%; }

.col-22 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 22%;
  -moz-flex: 0 0 22%;
  flex: 0 0 22%;
  　max-width: 22%; }

.col-23 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 23%;
  -moz-flex: 0 0 23%;
  flex: 0 0 23%;
  　max-width: 23%; }

.col-24 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 24%;
  -moz-flex: 0 0 24%;
  flex: 0 0 24%;
  　max-width: 24%; }

.col-25 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
  -moz-flex: 0 0 25%;
  flex: 0 0 25%;
  　max-width: 25%; }

.col-26 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 26%;
  -moz-flex: 0 0 26%;
  flex: 0 0 26%;
  　max-width: 26%; }

.col-27 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 27%;
  -moz-flex: 0 0 27%;
  flex: 0 0 27%;
  　max-width: 27%; }

.col-28 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 28%;
  -moz-flex: 0 0 28%;
  flex: 0 0 28%;
  　max-width: 28%; }

.col-29 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 29%;
  -moz-flex: 0 0 29%;
  flex: 0 0 29%;
  　max-width: 29%; }

.col-30 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 30%;
  -moz-flex: 0 0 30%;
  flex: 0 0 30%;
  　max-width: 30%; }

.col-31 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 31%;
  -moz-flex: 0 0 31%;
  flex: 0 0 31%;
  　max-width: 31%; }

.col-32 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 32%;
  -moz-flex: 0 0 32%;
  flex: 0 0 32%;
  　max-width: 32%; }

.col-33 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33%;
  -moz-flex: 0 0 33%;
  flex: 0 0 33%;
  　max-width: 33%; }

.col-34 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 34%;
  -moz-flex: 0 0 34%;
  flex: 0 0 34%;
  　max-width: 34%; }

.col-35 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 35%;
  -moz-flex: 0 0 35%;
  flex: 0 0 35%;
  　max-width: 35%; }

.col-36 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 36%;
  -moz-flex: 0 0 36%;
  flex: 0 0 36%;
  　max-width: 36%; }

.col-37 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 37%;
  -moz-flex: 0 0 37%;
  flex: 0 0 37%;
  　max-width: 37%; }

.col-38 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 38%;
  -moz-flex: 0 0 38%;
  flex: 0 0 38%;
  　max-width: 38%; }

.col-39 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 39%;
  -moz-flex: 0 0 39%;
  flex: 0 0 39%;
  　max-width: 39%; }

.col-40 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 40%;
  -moz-flex: 0 0 40%;
  flex: 0 0 40%;
  　max-width: 40%; }

.col-41 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 41%;
  -moz-flex: 0 0 41%;
  flex: 0 0 41%;
  　max-width: 41%; }

.col-42 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 42%;
  -moz-flex: 0 0 42%;
  flex: 0 0 42%;
  　max-width: 42%; }

.col-43 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 43%;
  -moz-flex: 0 0 43%;
  flex: 0 0 43%;
  　max-width: 43%; }

.col-44 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 44%;
  -moz-flex: 0 0 44%;
  flex: 0 0 44%;
  　max-width: 44%; }

.col-45 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 45%;
  -moz-flex: 0 0 45%;
  flex: 0 0 45%;
  　max-width: 45%; }

.col-46 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 46%;
  -moz-flex: 0 0 46%;
  flex: 0 0 46%;
  　max-width: 46%; }

.col-47 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 47%;
  -moz-flex: 0 0 47%;
  flex: 0 0 47%;
  　max-width: 47%; }

.col-48 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 48%;
  -moz-flex: 0 0 48%;
  flex: 0 0 48%;
  　max-width: 48%; }

.col-49 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 49%;
  -moz-flex: 0 0 49%;
  flex: 0 0 49%;
  　max-width: 49%; }

.col-50 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
  -moz-flex: 0 0 50%;
  flex: 0 0 50%;
  　max-width: 50%; }

.col-51 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 51%;
  -moz-flex: 0 0 51%;
  flex: 0 0 51%;
  　max-width: 51%; }

.col-52 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 52%;
  -moz-flex: 0 0 52%;
  flex: 0 0 52%;
  　max-width: 52%; }

.col-53 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 53%;
  -moz-flex: 0 0 53%;
  flex: 0 0 53%;
  　max-width: 53%; }

.col-54 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 54%;
  -moz-flex: 0 0 54%;
  flex: 0 0 54%;
  　max-width: 54%; }

.col-55 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 55%;
  -moz-flex: 0 0 55%;
  flex: 0 0 55%;
  　max-width: 55%; }

.col-56 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 56%;
  -moz-flex: 0 0 56%;
  flex: 0 0 56%;
  　max-width: 56%; }

.col-57 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 57%;
  -moz-flex: 0 0 57%;
  flex: 0 0 57%;
  　max-width: 57%; }

.col-58 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 58%;
  -moz-flex: 0 0 58%;
  flex: 0 0 58%;
  　max-width: 58%; }

.col-59 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 59%;
  -moz-flex: 0 0 59%;
  flex: 0 0 59%;
  　max-width: 59%; }

.col-60 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 60%;
  -moz-flex: 0 0 60%;
  flex: 0 0 60%;
  　max-width: 60%; }

.col-61 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 61%;
  -moz-flex: 0 0 61%;
  flex: 0 0 61%;
  　max-width: 61%; }

.col-62 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 62%;
  -moz-flex: 0 0 62%;
  flex: 0 0 62%;
  　max-width: 62%; }

.col-63 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 63%;
  -moz-flex: 0 0 63%;
  flex: 0 0 63%;
  　max-width: 63%; }

.col-64 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 64%;
  -moz-flex: 0 0 64%;
  flex: 0 0 64%;
  　max-width: 64%; }

.col-65 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 65%;
  -moz-flex: 0 0 65%;
  flex: 0 0 65%;
  　max-width: 65%; }

.col-66 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 66%;
  -moz-flex: 0 0 66%;
  flex: 0 0 66%;
  　max-width: 66%; }

.col-67 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 67%;
  -moz-flex: 0 0 67%;
  flex: 0 0 67%;
  　max-width: 67%; }

.col-68 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 68%;
  -moz-flex: 0 0 68%;
  flex: 0 0 68%;
  　max-width: 68%; }

.col-69 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 69%;
  -moz-flex: 0 0 69%;
  flex: 0 0 69%;
  　max-width: 69%; }

.col-70 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 70%;
  -moz-flex: 0 0 70%;
  flex: 0 0 70%;
  　max-width: 70%; }

.col-71 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 71%;
  -moz-flex: 0 0 71%;
  flex: 0 0 71%;
  　max-width: 71%; }

.col-72 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 72%;
  -moz-flex: 0 0 72%;
  flex: 0 0 72%;
  　max-width: 72%; }

.col-73 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 73%;
  -moz-flex: 0 0 73%;
  flex: 0 0 73%;
  　max-width: 73%; }

.col-74 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 74%;
  -moz-flex: 0 0 74%;
  flex: 0 0 74%;
  　max-width: 74%; }

.col-75 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 75%;
  -moz-flex: 0 0 75%;
  flex: 0 0 75%;
  　max-width: 75%; }

.col-76 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 76%;
  -moz-flex: 0 0 76%;
  flex: 0 0 76%;
  　max-width: 76%; }

.col-77 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 77%;
  -moz-flex: 0 0 77%;
  flex: 0 0 77%;
  　max-width: 77%; }

.col-78 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 78%;
  -moz-flex: 0 0 78%;
  flex: 0 0 78%;
  　max-width: 78%; }

.col-79 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 79%;
  -moz-flex: 0 0 79%;
  flex: 0 0 79%;
  　max-width: 79%; }

.col-80 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 80%;
  -moz-flex: 0 0 80%;
  flex: 0 0 80%;
  　max-width: 80%; }

.col-81 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 81%;
  -moz-flex: 0 0 81%;
  flex: 0 0 81%;
  　max-width: 81%; }

.col-82 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 82%;
  -moz-flex: 0 0 82%;
  flex: 0 0 82%;
  　max-width: 82%; }

.col-83 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 83%;
  -moz-flex: 0 0 83%;
  flex: 0 0 83%;
  　max-width: 83%; }

.col-84 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 84%;
  -moz-flex: 0 0 84%;
  flex: 0 0 84%;
  　max-width: 84%; }

.col-85 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 85%;
  -moz-flex: 0 0 85%;
  flex: 0 0 85%;
  　max-width: 85%; }

.col-86 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 86%;
  -moz-flex: 0 0 86%;
  flex: 0 0 86%;
  　max-width: 86%; }

.col-87 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 87%;
  -moz-flex: 0 0 87%;
  flex: 0 0 87%;
  　max-width: 87%; }

.col-88 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 88%;
  -moz-flex: 0 0 88%;
  flex: 0 0 88%;
  　max-width: 88%; }

.col-89 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 89%;
  -moz-flex: 0 0 89%;
  flex: 0 0 89%;
  　max-width: 89%; }

.col-90 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 90%;
  -moz-flex: 0 0 90%;
  flex: 0 0 90%;
  　max-width: 90%; }

.col-91 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 91%;
  -moz-flex: 0 0 91%;
  flex: 0 0 91%;
  　max-width: 91%; }

.col-92 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 92%;
  -moz-flex: 0 0 92%;
  flex: 0 0 92%;
  　max-width: 92%; }

.col-93 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 93%;
  -moz-flex: 0 0 93%;
  flex: 0 0 93%;
  　max-width: 93%; }

.col-94 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 94%;
  -moz-flex: 0 0 94%;
  flex: 0 0 94%;
  　max-width: 94%; }

.col-95 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 95%;
  -moz-flex: 0 0 95%;
  flex: 0 0 95%;
  　max-width: 95%; }

.col-96 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 96%;
  -moz-flex: 0 0 96%;
  flex: 0 0 96%;
  　max-width: 96%; }

.col-97 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 97%;
  -moz-flex: 0 0 97%;
  flex: 0 0 97%;
  　max-width: 97%; }

.col-98 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 98%;
  -moz-flex: 0 0 98%;
  flex: 0 0 98%;
  　max-width: 98%; }

.col-99 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 99%;
  -moz-flex: 0 0 99%;
  flex: 0 0 99%;
  　max-width: 99%; }

.col-100 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -moz-flex: 0 0 100%;
  flex: 0 0 100%;
  　max-width: 100%; }

.col-offset-1 {
  margin-left: 1%; }

.col-offset-2 {
  margin-left: 2%; }

.col-offset-3 {
  margin-left: 3%; }

.col-offset-4 {
  margin-left: 4%; }

.col-offset-5 {
  margin-left: 5%; }

.col-offset-6 {
  margin-left: 6%; }

.col-offset-7 {
  margin-left: 7%; }

.col-offset-8 {
  margin-left: 8%; }

.col-offset-9 {
  margin-left: 9%; }

.col-offset-10 {
  margin-left: 10%; }

.col-offset-11 {
  margin-left: 11%; }

.col-offset-12 {
  margin-left: 12%; }

.col-offset-13 {
  margin-left: 13%; }

.col-offset-14 {
  margin-left: 14%; }

.col-offset-15 {
  margin-left: 15%; }

.col-offset-16 {
  margin-left: 16%; }

.col-offset-17 {
  margin-left: 17%; }

.col-offset-18 {
  margin-left: 18%; }

.col-offset-19 {
  margin-left: 19%; }

.col-offset-20 {
  margin-left: 20%; }

.col-offset-21 {
  margin-left: 21%; }

.col-offset-22 {
  margin-left: 22%; }

.col-offset-23 {
  margin-left: 23%; }

.col-offset-24 {
  margin-left: 24%; }

.col-offset-25 {
  margin-left: 25%; }

.col-offset-26 {
  margin-left: 26%; }

.col-offset-27 {
  margin-left: 27%; }

.col-offset-28 {
  margin-left: 28%; }

.col-offset-29 {
  margin-left: 29%; }

.col-offset-30 {
  margin-left: 30%; }

.col-offset-31 {
  margin-left: 31%; }

.col-offset-32 {
  margin-left: 32%; }

.col-offset-33 {
  margin-left: 33%; }

.col-offset-34 {
  margin-left: 34%; }

.col-offset-35 {
  margin-left: 35%; }

.col-offset-36 {
  margin-left: 36%; }

.col-offset-37 {
  margin-left: 37%; }

.col-offset-38 {
  margin-left: 38%; }

.col-offset-39 {
  margin-left: 39%; }

.col-offset-40 {
  margin-left: 40%; }

.col-offset-41 {
  margin-left: 41%; }

.col-offset-42 {
  margin-left: 42%; }

.col-offset-43 {
  margin-left: 43%; }

.col-offset-44 {
  margin-left: 44%; }

.col-offset-45 {
  margin-left: 45%; }

.col-offset-46 {
  margin-left: 46%; }

.col-offset-47 {
  margin-left: 47%; }

.col-offset-48 {
  margin-left: 48%; }

.col-offset-49 {
  margin-left: 49%; }

.col-offset-50 {
  margin-left: 50%; }

.col-offset-51 {
  margin-left: 51%; }

.col-offset-52 {
  margin-left: 52%; }

.col-offset-53 {
  margin-left: 53%; }

.col-offset-54 {
  margin-left: 54%; }

.col-offset-55 {
  margin-left: 55%; }

.col-offset-56 {
  margin-left: 56%; }

.col-offset-57 {
  margin-left: 57%; }

.col-offset-58 {
  margin-left: 58%; }

.col-offset-59 {
  margin-left: 59%; }

.col-offset-60 {
  margin-left: 60%; }

.col-offset-61 {
  margin-left: 61%; }

.col-offset-62 {
  margin-left: 62%; }

.col-offset-63 {
  margin-left: 63%; }

.col-offset-64 {
  margin-left: 64%; }

.col-offset-65 {
  margin-left: 65%; }

.col-offset-66 {
  margin-left: 66%; }

.col-offset-67 {
  margin-left: 67%; }

.col-offset-68 {
  margin-left: 68%; }

.col-offset-69 {
  margin-left: 69%; }

.col-offset-70 {
  margin-left: 70%; }

.col-offset-71 {
  margin-left: 71%; }

.col-offset-72 {
  margin-left: 72%; }

.col-offset-73 {
  margin-left: 73%; }

.col-offset-74 {
  margin-left: 74%; }

.col-offset-75 {
  margin-left: 75%; }

.col-offset-76 {
  margin-left: 76%; }

.col-offset-77 {
  margin-left: 77%; }

.col-offset-78 {
  margin-left: 78%; }

.col-offset-79 {
  margin-left: 79%; }

.col-offset-80 {
  margin-left: 80%; }

.col-offset-81 {
  margin-left: 81%; }

.col-offset-82 {
  margin-left: 82%; }

.col-offset-83 {
  margin-left: 83%; }

.col-offset-84 {
  margin-left: 84%; }

.col-offset-85 {
  margin-left: 85%; }

.col-offset-86 {
  margin-left: 86%; }

.col-offset-87 {
  margin-left: 87%; }

.col-offset-88 {
  margin-left: 88%; }

.col-offset-89 {
  margin-left: 89%; }

.col-offset-90 {
  margin-left: 90%; }

.col-offset-91 {
  margin-left: 91%; }

.col-offset-92 {
  margin-left: 92%; }

.col-offset-93 {
  margin-left: 93%; }

.col-offset-94 {
  margin-left: 94%; }

.col-offset-95 {
  margin-left: 95%; }

.col-offset-96 {
  margin-left: 96%; }

.col-offset-97 {
  margin-left: 97%; }

.col-offset-98 {
  margin-left: 98%; }

.col-offset-99 {
  margin-left: 99%; }

.col-offset-100 {
  margin-left: 100%; }

.row .span {
  margin: 0; }
.row p {
  margin: 0; }
.row .col {
  overflow: hidden; }
.row .big-font {
  font-size: 2em; }
.row .align-right {
  text-align: right; }
.row .align-center {
  text-align: center; }
.row .align-left {
  text-align: left; }
.row .button {
  margin-top: 0;
  margin-bottom: 0; }

.one-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.row + .row {
  margin-top: 0px; }

.bottom-blank {
  height: 47px;
  width: 1px; }

.center-btn {
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex; }
  .center-btn img {
    -webkit-align-self: center;
            align-self: center;
    height: 25px; }

.line-through {
  text-decoration: line-through; }

.align-center-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex; }

.align-center-content-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.align-self-center {
  -webkit-align-self: center;
  align-self: center; }

.align-self-up {
  -webkit-align-self: flex-start;
  align-self: flex-start; }

.align-self-down {
  -webkit-align-self: flex-end;
  align-self: flex-end; }

.bottom-blank {
  height: 53px;
  width: 1px; }

.bar.bar-footer {
  height: 53px;
  background: rgba(36, 41, 47, 0.8); }
  .bar.bar-footer button {
    border-radius: 5px;
    background: #ffffff; }

.v-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%); }

.bar.bar-split {
  background-color: #e8e8e8;
  border-top: 1px solid #cbcbcb; }
  .bar.bar-split .content-left {
    float: left;
    left: 10px;
    position: absolute;
    width: 50%; }
  .bar.bar-split .text-down-wrap {
    position: relative;
    height: 43px; }
  .bar.bar-split .text-up {
    position: absolute;
    top: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .bar.bar-split .text-down {
    bottom: 0px;
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .bar.bar-split p {
    margin: 0; }
  .bar.bar-split .amount {
    font-size: 20px; }
  .bar.bar-split .red {
    color: #ff0000; }
  .bar.bar-split .content-right {
    float: right;
    width: 40%;
    right: 8px;
    position: absolute; }

ion-spinner {
  display: block;
  height: 28px; }

@-webkit-keyframes delay-display {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

.bar.bar-calm {
  background: #2cc17b;
  color: #fff; }

.wf-icon {
  width: 18px;
  height: 18px;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  margin-right: 10px;
  background-size: contain; }

button.clean {
  background-image: url(img/login/clean.png);
  position: absolute;
  top: 12.5px;
  right: 0;
  z-index: 99; }

.drag-enter {
  background-color: inherit !important; }
  .drag-enter .icon {
    background-color: #9CCC65; }

.platform-ios.platform-cordova .the-filter {
  top: 20px !important; }
.platform-ios.platform-cordova .area-text {
  top: 90px !important; }
.platform-ios.platform-cordova .scan-text {
  top: 90px !important; }
.platform-ios.platform-cordova .areapage-text {
  top: 90px !important; }
.platform-ios.platform-cordova .left-right-text {
  top: 90px !important; }
.platform-ios.platform-cordova .area-add-text {
  top: 90px !important; }
.platform-ios.platform-cordova .area-set-text {
  top: 258px !important; }
.platform-ios.platform-cordova .area-set-border {
  top: 166px !important; }
.platform-ios.platform-cordova .add-device-text {
  top: 268px !important; }
.platform-ios.platform-cordova .add-device-border {
  top: 114px !important; }
.platform-ios.platform-cordova .filter-scene-text {
  top: 164px !important; }

.sys-filter-div .the-filter {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
  opacity: 0.2; }
.sys-filter-div .device-content {
  position: fixed;
  z-index: 91;
  width: 100%;
  height: 100%; }
  .sys-filter-div .device-content .text-div {
    -webkit-animation: appear 0.8s ease-in;
            animation: appear 0.8s ease-in;
    position: relative;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    top: 234px;
    padding: 10px 10px 10px 10px;
    left: 25%;
    width: 71%;
    height: auto;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: #33b5e5;
    background-color: #333;
    border: 3px solid #33b5e5;
    border-radius: 5px; }
  .sys-filter-div .device-content .text-div:after {
    content: ' ';
    position: absolute;
    background-image: url('img/filter/blue_arrow_lb.png');
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -35px;
    left: -35px;
    width: 50px;
    height: 50px; }
  .sys-filter-div .device-content .border-div {
    -webkit-animation: appear-after 1.5s ease-in;
            animation: appear-after 1.5s ease-in;
    position: absolute;
    top: 266px;
    left: 2%;
    width: 96%;
    height: 188px;
    border: 3px solid #33b5e5;
    border-radius: 5px; }
.sys-filter-div .add-device-content {
  position: fixed;
  z-index: 91;
  width: 100%;
  height: 100%; }
  .sys-filter-div .add-device-content .add-device-text {
    -webkit-animation: appear 0.8s ease-in;
            animation: appear 0.8s ease-in;
    position: relative;
    top: 248px;
    padding: 10px 10px 10px 10px;
    left: 25%;
    width: 71%;
    height: auto;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: #33b5e5;
    background-color: #333;
    border: 3px solid #33b5e5;
    border-radius: 5px; }
  .sys-filter-div .add-device-content .add-device-text:after {
    content: ' ';
    position: absolute;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    background-image: url('img/filter/blue_arrow_rt.png');
    background-repeat: no-repeat;
    background-size: contain;
    top: -37px;
    left: -37px;
    width: 50px;
    height: 50px; }
  .sys-filter-div .add-device-content .add-device-border {
    -webkit-animation: appear-after 1.5s ease-in;
            animation: appear-after 1.5s ease-in;
    position: absolute;
    top: 94px;
    left: 2%;
    width: 96%;
    height: 128px;
    border: 3px solid #33b5e5;
    border-radius: 5px; }
.sys-filter-div .left-right-text {
  z-index: 90;
  position: absolute;
  -webkit-animation: appear 0.8s ease-in;
          animation: appear 0.8s ease-in;
  top: 70px;
  padding: 10px 10px 10px 10px;
  left: 12%;
  width: 71%;
  height: auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #33b5e5;
  background-color: #333;
  border: 3px solid #33b5e5;
  border-radius: 5px; }
.sys-filter-div .left-right-text:before {
  content: ' ';
  position: absolute;
  background-image: url('img/filter/blue_arrow_rt.png');
  background-repeat: no-repeat;
  background-size: contain;
  top: -37px;
  right: -37px;
  width: 50px;
  height: 50px; }
.sys-filter-div .old-player-model {
  background-image: url(img/filter/blue_x.png);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 12px center;
  pointer-events: auto;
  position: absolute;
  z-index: 91;
  bottom: 8%;
  left: 50%;
  padding-left: 32px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 40%;
  height: 40px;
  line-height: 36px;
  font-size: 20px;
  text-align: center;
  border-radius: 20px;
  border: 3px solid #33b5e5;
  background-color: #333;
  color: #33b5e5; }
.sys-filter-div .next-step {
  pointer-events: auto;
  position: absolute;
  white-space: nowrap;
  z-index: 91;
  bottom: 18%;
  min-width: 40%;
  -webkit-animation: appear-fater 1.5s ease-in;
          animation: appear-fater 1.5s ease-in;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: 0 15px;
  width: auto;
  height: 40px;
  line-height: 36px;
  font-size: 20px;
  text-align: center;
  border-radius: 20px;
  border: 3px solid #33b5e5;
  background-color: #333;
  color: #33b5e5; }
.sys-filter-div .area-text {
  z-index: 90;
  position: relative;
  -webkit-animation: appear 0.8s ease-in;
          animation: appear 0.8s ease-in;
  top: 70px;
  padding: 10px 10px 10px 10px;
  left: 12%;
  width: 71%;
  height: auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #33b5e5;
  background-color: #333;
  border: 3px solid #33b5e5;
  border-radius: 5px; }
.sys-filter-div .area-text:before {
  content: ' ';
  position: absolute;
  background-image: url('img/filter/blue_arrow_rt.png');
  background-repeat: no-repeat;
  background-size: contain;
  top: -37px;
  right: -37px;
  width: 50px;
  height: 50px; }

.sys-filter-div .scan-text {
  z-index: 90;
  position: absolute;
  -webkit-animation: appear 0.8s ease-in;
          animation: appear 0.8s ease-in;
  top: 70px;
  padding: 10px 10px 10px 10px;
  left: 12%;
  width: 71%;
  height: auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #33b5e5;
  background-color: #333;
  border: 3px solid #33b5e5;
  border-radius: 5px; }
.sys-filter-div .scan-text:before {
  content: ' ';
  position: absolute;
  background-image: url('img/filter/blue_arrow_rt.png');
  background-repeat: no-repeat;
  background-size: contain;
  top: -37px;
  right: -37px;
  width: 50px;
  height: 50px; }
.sys-filter-div .scaned-text {
  z-index: 90;
  position: relative;
  -webkit-animation: appear 0.8s ease-in;
          animation: appear 0.8s ease-in;
  top: 220px;
  padding: 10px 10px 10px 10px;
  left: 12%;
  width: 71%;
  height: auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #33b5e5;
  background-color: #333;
  border: 3px solid #33b5e5;
  border-radius: 5px; }

.sys-filter-div .area-set-content {
  position: fixed;
  z-index: 91;
  width: 100%;
  height: 100%; }
  .sys-filter-div .area-set-content .area-set-text {
    -webkit-animation: appear 0.8s ease-in;
            animation: appear 0.8s ease-in;
    position: relative;
    top: 238px;
    padding: 10px 10px 10px 10px;
    left: 25%;
    width: 71%;
    height: auto;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: #33b5e5;
    background-color: #333;
    border: 3px solid #33b5e5;
    border-radius: 5px; }
  .sys-filter-div .area-set-content .area-set-text:after {
    content: ' ';
    position: absolute;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    background-image: url('img/filter/blue_arrow_rt.png');
    background-repeat: no-repeat;
    background-size: contain;
    top: -37px;
    left: -37px;
    width: 50px;
    height: 50px; }
  .sys-filter-div .area-set-content .area-set-border {
    -webkit-animation: appear-after 1.5s ease-in;
            animation: appear-after 1.5s ease-in;
    position: absolute;
    top: 146px;
    left: 2%;
    width: 96%;
    height: 60px;
    border: 3px solid #33b5e5;
    border-radius: 5px; }
.sys-filter-div .area-add-text {
  z-index: 90;
  position: relative;
  -webkit-animation: appear 0.8s ease-in;
          animation: appear 0.8s ease-in;
  top: 70px;
  padding: 10px 10px 10px 10px;
  left: 12%;
  width: 71%;
  height: auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #33b5e5;
  background-color: #333;
  border: 3px solid #33b5e5;
  border-radius: 5px; }
.sys-filter-div .area-add-text:before {
  content: ' ';
  position: absolute;
  background-image: url('img/filter/blue_arrow_rt.png');
  background-repeat: no-repeat;
  background-size: contain;
  top: -37px;
  right: -37px;
  width: 50px;
  height: 50px; }
.sys-filter-div .area-added-text {
  z-index: 90;
  position: absolute;
  -webkit-animation: appear 0.8s ease-in;
          animation: appear 0.8s ease-in;
  top: 180px;
  padding: 10px 10px 10px 10px;
  left: 12%;
  width: 71%;
  height: auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #33b5e5;
  background-color: #333;
  border: 3px solid #33b5e5;
  border-radius: 5px; }

.sys-filter-div .areapage-text {
  z-index: 90;
  position: absolute;
  -webkit-animation: appear 0.8s ease-in;
          animation: appear 0.8s ease-in;
  top: 70px;
  padding: 10px 10px 10px 10px;
  left: 12%;
  width: 71%;
  height: auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #33b5e5;
  background-color: #333;
  border: 3px solid #33b5e5;
  border-radius: 5px; }
.sys-filter-div .areapage-text:before {
  content: ' ';
  position: absolute;
  background-image: url('img/filter/blue_arrow_rt.png');
  background-repeat: no-repeat;
  background-size: contain;
  top: -37px;
  right: -37px;
  width: 50px;
  height: 50px; }
.sys-filter-div .filter-explain-text {
  z-index: 90;
  position: relative;
  -webkit-animation: appear 0.8s ease-in;
          animation: appear 0.8s ease-in;
  top: 120px;
  padding: 10px 10px 10px 10px;
  left: 10%;
  width: 80%;
  height: auto;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #33b5e5;
  background-color: #333;
  border: 3px solid #33b5e5;
  border-radius: 5px; }
.sys-filter-div .filter-scene-text {
  z-index: 90;
  position: fixed;
  top: 144px;
  padding: 10px 10px 10px 10px;
  left: 10%;
  width: 80%;
  height: auto;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #33b5e5;
  background-color: #333;
  border: 3px solid #33b5e5;
  border-radius: 5px; }

.sysFiltering {
  color: #33b5e5; }

.dis-event {
  pointer-events: none; }

.able-event-after {
  -webkit-animation: dis-event 1.5s;
          animation: dis-event 1.5s; }

@-webkit-keyframes dis-event {
  from {
    pointer-events: none; }

  to {
    pointer-events: none; } }

@keyframes dis-event {
  from {
    pointer-events: none; }

  to {
    pointer-events: none; } }

@-webkit-keyframes appear {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@keyframes appear {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@-webkit-keyframes appear-after {
  0% {
    opacity: 0; }

  60% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes appear-after {
  0% {
    opacity: 0; }

  60% {
    opacity: 0; }

  100% {
    opacity: 1; } }

.progress-bar {
  width: 100%;
  height: 36px;
  margin: 5px 0;
  position: relative;
  clear: both;
  overflow: hidden; }
  .progress-bar .progress-slot {
    -webkit-box-shadow: 3px 3px 3px #333333 inset;
            box-shadow: 3px 3px 3px #333333 inset;
    margin: 8px 20px;
    padding: 4px 8px;
    height: 10px;
    border: 1px solid #eeeeee;
    background-color: #bdbdc8;
    border-radius: 5px; }
  .progress-bar .progress-slider-line {
    position: relative;
    top: -4px;
    width: 0;
    left: -8px;
    overflow: visible;
    border-radius: 5px;
    background-color: #2cc17b;
    height: 8px; }
  .progress-bar .progress-slider-div {
    content: ' ';
    position: absolute;
    right: -16px;
    top: -6px;
    width: 20px;
    height: 20px;
    background-image: url('img/music-play/point_ico.png');
    background-size: contain;
    background-repeat: no-repeat; }

.v-progress-bar {
  background: #2cc17b;
  opacity: 0.5;
  left: 80%;
  width: 50px;
  margin: 4% 0;
  top: 50%;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  height: 170px;
  padding: 10px 0;
  position: absolute;
  clear: both;
  overflow: hidden; }
  .v-progress-bar .v-progress-slot {
    width: 2px;
    margin-left: 24px;
    height: 150px;
    background-color: #fff; }
  .v-progress-bar .v-progress-slider-line {
    position: relative;
    bottom: 0px;
    width: 12%;
    margin: 4% 0;
    overflow: visible;
    background-color: #000;
    height: 150px; }
  .v-progress-bar .v-progress-slider-div {
    content: ' ';
    position: absolute;
    bottom: -10px;
    left: -9px;
    width: 20px;
    height: 20px;
    background-image: url('img/white_slider_icon.png');
    background-size: contain;
    background-repeat: no-repeat; }

.pline {
  width: 100%;
  height: 6px;
  top: 17px;
  position: relative;
  border-radius: 10px;
  background-color: #666; }
  .pline .pline-inner {
    position: absolute;
    height: 6px;
    top: 0;
    left: 0;
    border-radius: 10px;
    background-color: #2cc17b; }
  .pline .pline-point {
    position: absolute;
    -webkit-transform: translateX(-18px);
            transform: translateX(-18px);
    top: -15px;
    width: 36px;
    height: 36px;
    background-size: 16px 16px;
    background-image: url('img/music-play/point_ico.png');
    background-position: center;
    background-repeat: no-repeat; }

#context-model {
  background-color: #e5e5e5; }
  #context-model .ion-ios-pulse-strong {
    color: #2cc17b;
    height: 44px;
    line-height: 44px;
    font-size: 30px;
    display: inline-block;
    float: left;
    margin-right: 16px; }
  #context-model ion-content {
    padding: 16px; }
    #context-model ion-content .list {
      position: relative;
      margin: 0;
      padding: 0;
      border: 0;
      background: white; }
      #context-model ion-content .list .item-content {
        background: white;
        padding: 0;
        height: 44px; }
      #context-model ion-content .list .item {
        padding: 0;
        margin: 0;
        padding-left: 16px;
        margin-top: 16px;
        border: 0;
        height: 44px;
        background: white; }
        #context-model ion-content .list .item .name {
          color: #282828;
          height: 44px;
          line-height: 44px;
          font-size: 16px;
          float: left; }

#device-scan {
  background-color: #353a40; }
  #device-scan .device {
    margin-top: 15px;
    height: 40px;
    font-size: 22px; }
    #device-scan .device span {
      position: relative;
      color: white;
      left: 25px;
      top: 5px; }
  #device-scan .area-container {
    padding: 5px 16px; }
    #device-scan .area-container .title-text {
      color: #c99065;
      font-weight: bold;
      font-size: 20px; }
    #device-scan .area-container .area {
      color: #fff;
      padding-left: 16px; }
      #device-scan .area-container .area .one-line {
        padding: 5px 5px; }
        #device-scan .area-container .area .one-line img {
          padding-right: 16px;
          height: 15px;
          vertical-align: text-top; }
        #device-scan .area-container .area .one-line .on {
          -webkit-transform: rotate(90deg);
                  transform: rotate(90deg); }
      #device-scan .area-container .area .count {
        float: right;
        padding-right: 16px; }
      #device-scan .area-container .area .attr {
        padding-left: 16px;
        margin-top: 5px; }

#curtain-controller {
  background: #fff; }
  #curtain-controller .name {
    width: 100%;
    padding: 16px;
    margin-bottom: 2px;
    font-size: 18px;
    font-weight: 400;
    text-align: center; }
    #curtain-controller .name span {
      line-height: 44px;
      white-space: nowrap;
      display: inline-block;
      width: 100%; }
  #curtain-controller .button-container {
    height: 68px;
    padding: 0 0 24px 0; }
    #curtain-controller .button-container .ion-ios-arrow-up, #curtain-controller .button-container .ion-stop, #curtain-controller .button-container .ion-ios-arrow-down {
      width: 26%;
      float: left;
      height: 44px;
      margin-left: 5.5%;
      background: #323232;
      border: 0;
      color: #fff !important;
      border-radius: 20px; }
    #curtain-controller .button-container .ion-ios-arrow-up, #curtain-controller .button-container .ion-ios-arrow-down {
      font-size: 24px; }
    #curtain-controller .button-container .activated {
      background-color: #2cc17b !important;
      opacity: 1; }
  #curtain-controller button {
    width: 44px;
    min-width: 44px;
    border: 0 !important;
    font-size: 44px; }
  #curtain-controller .input-container {
    text-align: center;
    height: 84px;
    padding: 20px 0; }
    #curtain-controller .input-container percent-label {
      color: #c0c0c0;
      font-size: 18px;
      display: inline-block;
      line-height: 44px;
      height: 44px;
      float: left;
      text-align: center; }
    #curtain-controller .input-container lighter-icon {
      float: right;
      color: #c0c0c0;
      font-size: 18px;
      display: inline-block;
      line-height: 36px;
      height: 36px;
      text-align: center;
      margin: 4px 8px;
      width: 36px;
      border-radius: 50%; }
    #curtain-controller .input-container .ion-android-bulb {
      font-size: 30px; }
    #curtain-controller .input-container .off {
      color: #c6c6c6;
      border: 1px solid #c6c6c6; }
    #curtain-controller .input-container .on {
      color: #2cc17b;
      border: 1px solid #2cc17b; }

#device-list {
  background-color: #353a40; }
  #device-list .title-name {
    color: #c99065;
    text-align: center;
    padding: 10px 0; }
  #device-list .head-button {
    border: none;
    background-color: #242328;
    color: white; }

#device-scan {
  background: #e8e8e8; }
  #device-scan .ion-android-expand {
    color: #fff; }
  #device-scan .device {
    margin-top: 15px;
    height: 40px;
    font-size: 22px; }
    #device-scan .device span {
      position: relative;
      color: white;
      left: 25px;
      top: 5px; }
  #device-scan .light-bg-div {
    margin: 20px 20px 0 20px; }
  #device-scan .area-container {
    padding: 5px 16px; }
    #device-scan .area-container .title-text {
      color: #c99065;
      font-weight: bold;
      font-size: 20px; }
    #device-scan .area-container .area {
      color: #fff;
      padding-left: 16px; }
      #device-scan .area-container .area .one-line {
        padding: 5px 5px; }
        #device-scan .area-container .area .one-line img {
          padding-right: 16px;
          height: 15px;
          vertical-align: text-top; }
        #device-scan .area-container .area .one-line .on {
          -webkit-transform: rotate(90deg);
                  transform: rotate(90deg); }
      #device-scan .area-container .area .count {
        float: right;
        padding-right: 16px; }
      #device-scan .area-container .area .attr {
        padding-left: 16px;
        margin-top: 5px; }
  #device-scan .need-scan {
    width: 100%;
    height: auto;
    color: white;
    padding: 20px 10% 10px;
    font-size: 18px;
    line-height: 24px;
    text-align: center; }

#data-recovery {
  background-color: #fff; }
  #data-recovery .btndev {
    margin-top: 16px;
    padding-left: 16px;
    width: 100%;
    height: 44px;
    color: #323232;
    border: none;
    text-align: left;
    font-size: 18px; }
    #data-recovery .btndev span {
      display: inline-block;
      height: 44px;
      line-height: 44px; }
    #data-recovery .btndev .icon {
      color: #c6c6c6;
      width: 44px;
      font-size: 24px;
      margin-right: 16px; }
    #data-recovery .btndev .ion-ios-bolt::before {
      font-size: 40px; }
  #data-recovery .btndev:first-child {
    margin-top: 32px; }

#edit-config-data {
  background-color: #f0f0f0; }
  #edit-config-data .button {
    min-height: inherit;
    margin: 5px 0;
    line-height: 25px;
    height: 25px; }
  #edit-config-data .object {
    background: #fff;
    margin: 20px 20px 0 20px;
    position: relative; }
    #edit-config-data .object .del {
      margin: 0;
      position: absolute;
      right: 50%;
      -webkit-transform: translate(50%);
              transform: translate(50%);
      top: 0;
      height: 20px; }
      #edit-config-data .object .del img {
        height: 100%; }
    #edit-config-data .object .one-line {
      margin: 5px 0;
      padding: 0 16px;
      position: relative; }
      #edit-config-data .object .one-line span {
        line-height: 35px;
        width: 100%; }
      #edit-config-data .object .one-line input {
        padding: 0 0 0 10px;
        background: #f0f0f0;
        border: 1px solid #f0f0f0;
        width: 100%;
        height: 35px;
        font-size: 14px;
        line-height: 35px;
        color: #000; }
      #edit-config-data .object .one-line .editing {
        background: #fff; }
      #edit-config-data .object .one-line .save {
        position: absolute;
        top: 0;
        right: 16px;
        color: #323232 !important;
        border: 1px solid #2cc17b; }
      #edit-config-data .object .one-line .cancel {
        position: absolute;
        top: 0;
        right: 82px;
        color: #323232 !important;
        border: 1px solid #2cc17b; }
    #edit-config-data .object .divider {
      height: 10px; }
  #edit-config-data .removing {
    border: 1px dashed red; }
  #edit-config-data .device-selection-container {
    padding-top: 5px;
    background: #fff;
    position: relative;
    margin: 5px 16px; }
    #edit-config-data .device-selection-container .device-selection {
      text-align: center;
      width: 40%;
      margin: 5px 5%;
      display: inline-block; }
      #edit-config-data .device-selection-container .device-selection .check-span {
        border-radius: 20px;
        border: 1px solid #757575; }
  #edit-config-data .current-device {
    margin-top: -5px !important;
    text-align: center;
    background: #fff; }
    #edit-config-data .current-device .show {
      width: auto;
      text-align: center;
      height: 30px;
      padding: 5px 0; }
      #edit-config-data .current-device .show img {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
        height: 10px; }
  #edit-config-data .new {
    width: 100%;
    height: 30px;
    margin: 0;
    line-height: 60px; }
    #edit-config-data .new img {
      text-align: center;
      height: 30px; }
  #edit-config-data .footer {
    background: #2cc17b; }

#edit-config-data-hold {
  background-color: #353a40; }

head-toast header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 34px;
  line-height: 34px;
  color: #000;
  text-align: center;
  background: #f0f0f0;
  z-index: 99;
  font-size: 12px;
  opacity: 0.8; }

#home-view {
  background-color: #fff;
  font-size: 18px; }
  #home-view .title {
    text-align: center; }
  #home-view .mode-container {
    background: #2cc17b;
    height: 220px;
    padding: 10px; }
    #home-view .mode-container .mode {
      position: relative;
      margin: auto;
      border: solid 1px #fff;
      height: 200px;
      width: 200px;
      border-radius: 50%; }
      #home-view .mode-container .mode .middle-container {
        position: absolute;
        left: 50%;
        top: 50%;
        background: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%); }
      #home-view .mode-container .mode .middle {
        position: absolute;
        left: 50%;
        top: 50%;
        background: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        padding: 10px;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%); }
        #home-view .mode-container .mode .middle p {
          margin: auto;
          padding: 0 2px;
          color: #2cc17b; }
      #home-view .mode-container .mode img {
        width: 30px; }
      #home-view .mode-container .mode p {
        margin: 0;
        padding: 0;
        color: #fff; }
      #home-view .mode-container .mode .up {
        position: absolute;
        top: 5%;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
                transform: translate(-50%, 0); }
      #home-view .mode-container .mode .left {
        position: absolute;
        top: 50%;
        left: 8%;
        -webkit-transform: translate(0, -50%);
                transform: translate(0, -50%); }
      #home-view .mode-container .mode .down {
        position: absolute;
        bottom: 5%;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
                transform: translate(-50%, 0); }
      #home-view .mode-container .mode .right {
        position: absolute;
        top: 50%;
        right: 8%;
        -webkit-transform: translate(0, -50%);
                transform: translate(0, -50%); }
    #home-view .mode-container .mode-up {
      border: none;
      left: 50%;
      top: 26px;
      position: absolute;
      width: 100px;
      height: 100px;
      background: #fff;
      opacity: 0.5;
      border-top-right-radius: 100%;
      -webkit-transform: rotate(-45deg) translate(0%, -70%);
              transform: rotate(-45deg) translate(0%, -70%);
      text-align: center; }
    #home-view .mode-container .mode-left {
      border: none;
      top: 50%;
      position: absolute;
      width: 100px;
      height: 100px;
      background: #fff;
      opacity: 0.5;
      border-top-left-radius: 100%;
      -webkit-transform: rotate(-45deg) translate(20%, -50%);
              transform: rotate(-45deg) translate(20%, -50%);
      text-align: center; }
    #home-view .mode-container .mode-down {
      border: none;
      left: 50%;
      bottom: -70px;
      position: absolute;
      width: 100px;
      height: 100px;
      background: #fff;
      opacity: 0.5;
      border-bottom-left-radius: 100%;
      -webkit-transform: rotate(-45deg) translate(0%, -70%);
              transform: rotate(-45deg) translate(0%, -70%);
      text-align: center; }
    #home-view .mode-container .mode-right {
      border: none;
      right: -50%;
      top: 50%;
      position: absolute;
      width: 100px;
      height: 100px;
      background: #fff;
      opacity: 0.5;
      border-bottom-right-radius: 100%;
      -webkit-transform: rotate(-45deg) translate(-20%, -90%);
              transform: rotate(-45deg) translate(-20%, -90%);
      text-align: center; }
  #home-view .filtering-area {
    height: 140px;
    overflow: hidden; }
  #home-view .device-container .device {
    margin-top: 25px;
    border-radius: 3px;
    width: 25%;
    float: left;
    text-align: center; }
    #home-view .device-container .device .icon {
      height: 60px; }
  #home-view p {
    font-size: 16px; }

#about {
  background-color: #f5f5f5; }
  #about .first-link, #about .second-link {
    width: 60%;
    height: 54px;
    margin-left: 20%;
    margin-bottom: 10%;
    border: 1px solid #aaa;
    color: #282828;
    background-color: #c0f1d2;
    padding: 10px 12px;
    font-size: 18px;
    text-align: center;
    line-height: 34px;
    border-radius: 8px;
    text-decoration: underline; }
  #about .first-link {
    margin-top: 36%; }

#light-controller {
  background: #fff;
  height: auto;
  clear: both;
  overflow: hidden;
  position: relative; }
  #light-controller .name {
    height: 44px;
    padding: 16px;
    margin-bottom: 2px;
    font-size: 18px;
    font-weight: 400;
    text-align: center; }
    #light-controller .name span {
      line-height: 44px;
      white-space: nowrap;
      display: inline-block;
      width: 100%; }
  #light-controller .input-container {
    text-align: center;
    height: 84px;
    padding: 20px 0; }
    #light-controller .input-container percent-label {
      color: #c0c0c0;
      font-size: 18px;
      display: inline-block;
      line-height: 44px;
      height: 44px;
      float: left;
      text-align: center; }
    #light-controller .input-container lighter-icon {
      float: right;
      color: #c0c0c0;
      font-size: 18px;
      display: inline-block;
      line-height: 36px;
      height: 36px;
      text-align: center;
      margin: 4px 8px;
      width: 36px;
      border-radius: 50%; }
    #light-controller .input-container .ion-android-bulb {
      font-size: 30px; }
    #light-controller .input-container .off {
      color: #c6c6c6;
      border: 1px solid #c6c6c6; }
    #light-controller .input-container .on {
      color: #2cc17b;
      border: 1px solid #2cc17b; }
  #light-controller button {
    width: 44px;
    min-width: 44px;
    border: 0 !important;
    font-size: 44px; }
  #light-controller progress-bar {
    display: block;
    width: 60%;
    height: 44px;
    position: relative;
    float: left; }
    #light-controller progress-bar progress-slot {
      display: block;
      margin: 18px 20px 0 20px;
      padding: 4px 8px;
      height: 8px;
      background-color: #c6c6c6;
      border-radius: 5px; }
    #light-controller progress-bar slider-line {
      display: block;
      position: relative;
      top: -4px;
      width: 0;
      left: -8px;
      overflow: visible;
      border-radius: 5px;
      background-color: #2cc17b;
      height: 8px; }
    #light-controller progress-bar slider-div {
      display: block;
      content: ' ';
      position: absolute;
      right: -25px;
      top: -17px;
      width: 44px;
      height: 44px;
      background-image: url('img/light_on.png');
      background-size: contain;
      background-repeat: no-repeat; }

#login {
  background: #fff; }
  #login .bar-calm {
    background: transparent; }
    #login .bar-calm .button {
      background: transparent;
      border: 0; }
    #login .bar-calm .ion-chevron-left {
      color: #2cc17b; }
  #login .spinner svg {
    margin-top: 9px; }
  #login .loginForm {
    width: 80%;
    margin: 60vh auto;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    position: relative; }
    #login .loginForm .logo {
      position: absolute;
      top: -200px;
      width: 120px;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); }
    #login .loginForm input {
      font-size: 16px;
      padding-right: 60px;
      color: #c0c0c0; }
    #login .loginForm .forgot {
      margin-top: 32px;
      font-size: 16px;
      text-align: right; }
      #login .loginForm .forgot a {
        text-decoration: underline;
        color: #c0c0c0;
        -webkit-text-decoration-color: #c0c0c0;
                text-decoration-color: #c0c0c0; }
      #login .loginForm .forgot a.activated {
        color: #71747b; }
  #login .item {
    height: 64px;
    background-color: #fff;
    border: 1px solid #c6c6c6; }
  #login .login {
    margin-top: 30px;
    width: 100%;
    height: 50px;
    background: #2cc17b;
    color: #fff;
    border-radius: 5px; }
    #login .login span {
      display: inline-block;
      line-height: 50px;
      height: 50px;
      margin: auto;
      font-size: 16px; }
  #login button.clean {
    right: 30px;
    top: 25px; }
  #login .username {
    background-image: url('img/login/user_ico.png');
    width: 20px;
    height: 20px;
    background-size: cover;
    margin-right: 8px; }
  #login .pwd {
    background-image: url('img/login/lock_ico.png');
    width: 20px;
    height: 20px;
    background-size: cover;
    margin-right: 8px; }

#connect-way {
  background-color: #f5f5f5; }
  #connect-way .line-div {
    width: 60%;
    height: 54px;
    margin-left: 20%;
    margin-bottom: 8%;
    border: 1px solid #aaa;
    color: #282828;
    background-color: #c0f1d2;
    padding: 10px 12px;
    font-size: 18px;
    text-align: center;
    line-height: 34px;
    border-radius: 8px; }
  #connect-way .margin-more {
    margin-top: 32%; }
  #connect-way .checked-type {
    background-color: #2cc17b !important; }

#local-login {
  background: #fff; }
  #local-login .bar-calm {
    background: transparent; }
    #local-login .bar-calm .button {
      background: transparent;
      border: 0; }
  #local-login input[disabled] {
    background: transparent; }
  #local-login .spinner svg {
    margin-top: 9px; }
  #local-login .loginForm {
    width: 100%;
    padding: 60px 0 50px;
    text-align: center;
    position: relative;
    height: 230px; }
    #local-login .loginForm .logo {
      width: 120px; }
    #local-login .loginForm input {
      font-size: 16px;
      color: #c0c0c0; }
    #local-login .loginForm .divider {
      width: 100%;
      height: 5px;
      background: #232930;
      -webkit-transform: translateX(-1px);
              transform: translateX(-1px); }
      #local-login .loginForm .divider div {
        height: 5px;
        -webkit-transform: translateX(1px);
                transform: translateX(1px);
        background: #353a40; }
    #local-login .loginForm .forgot {
      margin-top: 32px;
      font-size: 16px;
      text-align: right; }
      #local-login .loginForm .forgot a {
        text-decoration: underline;
        color: #c0c0c0;
        -webkit-text-decoration-color: #c0c0c0;
                text-decoration-color: #c0c0c0; }
      #local-login .loginForm .forgot a.activated {
        color: #71747b; }
  #local-login .item {
    background-color: #232930;
    border: 0; }
  #local-login .login-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #353a40;
    position: absolute;
    right: -30px;
    top: 15px;
    z-index: 2;
    padding: 5px; }
    #local-login .login-container .login {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #232930;
      color: #353a40; }
      #local-login .login-container .login span {
        display: inline-block;
        line-height: 50px;
        height: 50px;
        margin: auto;
        font-size: 16px; }
  #local-login button.clean {
    right: 30px; }
  #local-login .number-keyboard .num {
    border: 0;
    width: 32.66666%;
    margin-left: 0.5%;
    height: 56px;
    float: left;
    margin-top: 10px;
    text-align: center; }
    #local-login .number-keyboard .num span {
      margin: auto;
      line-height: 56px;
      border: 1px solid #646464;
      border-radius: 50%;
      width: 56px;
      height: 56px;
      display: block;
      font-size: 30px;
      color: #646464; }
  #local-login .display {
    text-align: center;
    font-size: 30px;
    color: #2cc17b; }
  #local-login .hint {
    text-align: center;
    font-size: 20px;
    color: #646464; }
  #local-login .ion-backspace-outline:before {
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px); }
  #local-login .logo-div {
    width: 100%;
    padding: 50px 0 40px;
    text-align: center;
    position: relative;
    height: 210px; }
    #local-login .logo-div .logo {
      width: 120px; }
  #local-login .button:after {
    position: relative !important; }
  #local-login .pwd-div {
    width: 100%;
    height: auto; }
    #local-login .pwd-div .pwd-text {
      width: 100%;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 15px;
      margin-bottom: 10px; }
    #local-login .pwd-div .pwd-line {
      position: relative;
      width: 185px;
      height: 36px;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      border: 1px solid #2cc17b; }
      #local-login .pwd-div .pwd-line .pwd-ceil {
        width: 30px;
        height: inherit;
        line-height: 36px;
        font-weight: 500;
        font-size: 20px;
        text-align: center;
        float: left;
        border-right: 1px solid #2cc17b; }
      #local-login .pwd-div .pwd-line :last-child {
        border-right: none !important; }
  #local-login .number-board {
    width: 100%;
    padding: 20px 10px 0; }
    #local-login .number-board .line {
      width: 100%;
      padding: 8px 0;
      height: 66px;
      overflow: hidden;
      clear: both; }
    #local-login .number-board .pwd-btn {
      width: 32%;
      height: 52px;
      margin: 0 !important;
      -webkit-box-shadow: none !important;
              box-shadow: none !important;
      border: none !important; }
      #local-login .number-board .pwd-btn .key-ceil {
        border-radius: 50%;
        border: 1px solid #333;
        color: #282828;
        width: 52px;
        height: 52px;
        margin: 0 auto;
        font-weight: 500;
        font-size: 22px;
        text-align: center;
        line-height: 52px; }

.modal {
  position: fixed;
  z-index: 11;
  top: 36%;
  left: 15%;
  max-width: 70%;
  min-height: 7.40741vw;
  height: auto;
  padding: 1.8vw 4.44444vw 1.8vw 4.44444vw;
  color: #ea4c87;
  background-color: white; }

.my-modal-view .one-line-modal {
  border-radius: 3px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 70%;
  max-width: 70%;
  display: inline;
  padding: 0; }
.my-modal-view .my-modal {
  position: fixed;
  z-index: 11;
  top: 36%;
  left: 13%;
  width: 74%;
  min-height: 25.92593vw;
  height: auto;
  padding: 4.44444vw 4.44444vw 0 4.44444vw;
  color: #ea4c87;
  background-color: white; }
.my-modal-view .filter-0 {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: 0; }
.my-modal-view .filter {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: grey;
  opacity: 0.5; }
.my-modal-view .modal-title {
  width: 100%;
  height: 11.7vw;
  padding-top: 3vw;
  padding-bottom: 4.2vw;
  font-size: 4.5vw;
  line-height: normal;
  color: #ea4c87; }
.my-modal-view .modal-line {
  height: 10.3vw;
  padding-top: 2.5vw;
  padding-bottom: 3.6vw;
  border-top: 1px solid #ea4c87;
  color: #636363;
  line-height: normal;
  font-size: 4.2vw; }
.my-modal-view .border-top {
  border-top: 1px solid #ea4c87; }
.my-modal-view .one-line {
  border: 0;
  text-align: left;
  background: #fff;
  color: #222222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

#berry-config {
  background-color: #e0e0e0; }
  #berry-config .berry-div {
    margin: 20px 5% 10px;
    padding-bottom: 20px;
    width: 90%;
    height: auto;
    background-color: white; }
    #berry-config .berry-div .berry-title {
      text-align: center;
      font-size: 16px;
      padding: 10px 20px 0; }
    #berry-config .berry-div .save-div {
      width: 100%;
      height: 60px;
      margin: 20px 0 0; }
    #berry-config .berry-div .save-btn {
      float: left;
      margin-left: 30px;
      width: 100px;
      height: 40px;
      border-radius: 5px;
      background-color: #2cc17b;
      color: white;
      font-size: 16px;
      padding: 10px;
      line-height: 20px;
      text-align: center; }

#music-controller {
  background: #fff; }
  #music-controller .divider {
    height: 10px;
    background: #f0f0f0; }
  #music-controller .name {
    height: 44px;
    margin: 0 16px;
    margin-bottom: 2px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 18px;
    font-weight: 400;
    text-align: left; }
    #music-controller .name span {
      line-height: 44px;
      white-space: nowrap;
      display: inline-block;
      width: 50%;
      text-align: left; }
    #music-controller .name button {
      height: 44px;
      border: 0;
      background: transparent;
      float: right;
      color: #2cc17b;
      font-size: 24px; }
  #music-controller .music-container {
    padding: 10px 10px;
    position: relative; }
    #music-controller .music-container .cover-container {
      margin-left: 1%;
      width: 20%;
      height: auto;
      padding: 5px;
      background: #f0f0f0;
      border-radius: 10px;
      display: inline-block; }
      #music-controller .music-container .cover-container img {
        width: 100%;
        margin-bottom: -5px; }
    #music-controller .music-container .text-container {
      margin-left: 3%;
      width: 40%;
      display: inline-block; }
      #music-controller .music-container .text-container .song {
        font-size: 20px;
        color: #323232;
        font-weight: 700;
        top: 10px;
        left: 120px; }
      #music-controller .music-container .text-container .author {
        font-size: 12px;
        color: #8d8d8d;
        top: 30px;
        left: 120px; }
    #music-controller .music-container .button-container {
      margin-left: 3%;
      width: 30%;
      display: inline-block; }
      #music-controller .music-container .button-container .play {
        display: inline-block;
        background: url("img/music-controller/play.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        border-radius: 50%;
        height: 42px;
        width: 50px; }
      #music-controller .music-container .button-container .pause {
        display: inline-block;
        background: url("img/music-controller/pause.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        border-radius: 50%;
        height: 42px;
        width: 50px; }
      #music-controller .music-container .button-container .next {
        background: url("img/music-controller/next.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        border-radius: 50%;
        width: 30px;
        padding: 0 10px;
        height: 30px; }

#music-play {
  background-color: #f5f5f5; }
  #music-play ion-content {
    padding: 0; }
  #music-play .title {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  #music-play .list-btn {
    background-image: url('img/music-play/list_ico.png');
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: center; }
  #music-play .cover-container {
    width: 100%;
    margin-top: 10vw;
    height: 60vw;
    padding: 0 20vw; }
    #music-play .cover-container .cover {
      width: 60vw;
      height: 60vw;
      border-radius: 50%; }
  #music-play .info-container {
    margin-top: 20px;
    width: 100%;
    height: auto;
    color: #282828;
    margin-bottom: 20px; }
    #music-play .info-container .music-name {
      font-size: 20px;
      font-weight: 500;
      text-align: center;
      margin-bottom: 8px; }
    #music-play .info-container .music-singer {
      font-size: 16px;
      text-align: center; }
  #music-play .control-container {
    margin: 0 14% 20px;
    width: 72%;
    height: 16vw; }
    #music-play .control-container .left-btn, #music-play .control-container .right-btn, #music-play .control-container .middle-btn {
      background-repeat: no-repeat;
      background-size: cover;
      position: relative; }
    #music-play .control-container .left-btn {
      background-image: url('img/music-play/pre_ico.png');
      float: left;
      width: 12vw;
      height: 12vw;
      margin-right: 16vw;
      top: 2vw; }
    #music-play .control-container .middle-btn {
      float: left;
      width: 16vw;
      height: 16vw; }
    #music-play .control-container .playing {
      background-image: url('img/music-play/m_play_ico.png'); }
    #music-play .control-container .pausing {
      background-image: url('img/music-play/m_pause_ico.png'); }
    #music-play .control-container .right-btn {
      background-image: url('img/music-play/pre_ico.png');
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
      float: right;
      width: 12vw;
      height: 12vw;
      top: 2vw; }
  #music-play .button-container {
    margin: 0 0 20px 12%;
    width: 88%;
    height: 8vw; }
    #music-play .button-container .love-btn, #music-play .button-container .modal-btn, #music-play .button-container .style-btn, #music-play .button-container .voice-btn {
      background-repeat: no-repeat;
      background-size: 8vw 8vw;
      position: relative;
      background-position: 1vw center; }
    #music-play .button-container .love-btn {
      float: left;
      width: 12vw;
      padding: 0 2vw;
      height: 8vw;
      margin-right: 6vw; }
    #music-play .button-container .modal-btn {
      float: left;
      width: 12vw;
      padding: 0 2vw;
      height: 8vw;
      margin-right: 6vw; }
    #music-play .button-container .voice-btn {
      float: left;
      width: 12vw;
      padding: 0 2vw;
      height: 8vw;
      margin-right: 6vw; }
    #music-play .button-container .straight {
      background-image: url('img/music-play/modo_ico0.png'); }
    #music-play .button-container .random {
      background-image: url('img/music-play/modo_ico3.png'); }
    #music-play .button-container .repeatOne {
      background-image: url('img/music-play/modo_ico2.png'); }
    #music-play .button-container .repeat {
      background-image: url('img/music-play/modo_ico1.png'); }
    #music-play .button-container .love {
      background-image: url('img/music-play/like_ico_hov.png'); }
    #music-play .button-container .un-love {
      background-image: url('img/music-play/like_ico.png'); }
    #music-play .button-container .voice-open {
      background-image: url('img/music-play/voice_on.png'); }
    #music-play .button-container .voice-close {
      background-image: url('img/music-play/voice_off.png'); }
    #music-play .button-container .style-btn {
      float: left;
      border: 1px solid #666;
      color: #666;
      border-radius: 4vw;
      width: 16vw;
      text-align: center;
      line-height: 6.4vw;
      font-size: 3.8vw;
      height: 6.4vw;
      top: 0.6vw; }
  #music-play .pline-container {
    width: 100%;
    height: 40px;
    margin-bottom: 20px; }
    #music-play .pline-container .play-time {
      text-align: right; }
    #music-play .pline-container .music-duration {
      text-align: left; }
    #music-play .pline-container .play-time, #music-play .pline-container .music-duration {
      width: 13%;
      float: left;
      height: inherit;
      font-size: 14px;
      line-height: 40px; }
    #music-play .pline-container .pline-div {
      margin: 0 3%;
      width: 68%;
      float: left;
      height: 40px;
      position: relative; }
  #music-play .progress-bar {
    width: 100%;
    position: relative;
    margin-bottom: 20px; }
  #music-play .progress-slider {
    width: 100%;
    position: relative; }
  #music-play .passed-time {
    position: absolute;
    width: 100%;
    color: #fff;
    top: 73%;
    font-size: 36px;
    font-weight: 100;
    text-align: center; }
  #music-play .info {
    margin-top: 32%;
    width: 100%;
    color: #fff;
    text-align: center; }
  #music-play .sound-effect {
    color: #fff !important;
    position: absolute;
    top: 32px;
    left: 32px; }

#music-list {
  background-color: #fff; }
  #music-list .play-list {
    padding: 5px 10px;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #f0f0f0; }
    #music-list .play-list .order {
      position: absolute;
      width: 10%;
      height: 80px;
      line-height: 60px;
      padding: 10px 0;
      color: #2cc17b;
      font-size: 16px;
      text-align: center; }
    #music-list .play-list .info {
      margin-left: 10%;
      display: inline-block;
      height: 80px;
      width: 88%; }
      #music-list .play-list .info .song {
        display: block;
        height: 40px;
        line-height: 60px;
        color: #323232;
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
      #music-list .play-list .info .time {
        display: inline-block;
        height: 40px;
        color: #757575;
        font-size: 14px; }
      #music-list .play-list .info .author {
        display: inline-block;
        height: 40px;
        color: #757575;
        font-size: 14px; }
  #music-list .even {
    background: #c0f1d2; }
  #music-list .playing {
    position: absolute;
    right: 20px;
    top: 20px;
    background: url("img/music-controller/music-playing.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border-radius: 50%;
    width: 10%;
    padding: 0 5px;
    height: 40px; }

#scan-loading {
  position: relative;
  width: 30px;
  height: 30px; }
  #scan-loading .round {
    border: 1px solid rgba(255, 255, 255, 0.5); }
  #scan-loading .w60 {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 30px;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    width: 30px; }
  #scan-loading .w40 {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 20px;
    height: 20px;
    width: 20px; }
  #scan-loading .w20 {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 10px;
    height: 10px;
    width: 10px; }
  #scan-loading .w2 {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 1px;
    height: 1px;
    width: 1px; }
  #scan-loading .line {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(center top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)) repeat scroll 0 0;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0 0 15px;
    height: 15px;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 0 0 0;
            transform-origin: 0 0 0;
    width: 15px; }
  #scan-loading .roundMove {
    -webkit-animation: round 3s infinite linear;
            animation: round 3s infinite linear; }

@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

#security-controller {
  background: #fff;
  position: relative; }
  #security-controller .name {
    height: 44px;
    margin: 0 56px 2px 12px;
    font-size: 18px;
    font-weight: 400;
    text-align: center; }
    #security-controller .name span {
      line-height: 44px;
      white-space: nowrap;
      display: inline-block;
      width: 100%;
      text-align: center; }
  #security-controller .scrt-set {
    position: absolute;
    left: 10px;
    top: 0;
    font-size: 28px;
    color: #2cc17b;
    line-height: 44px; }
  #security-controller .scrt-record {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 28px;
    color: #2cc17b;
    line-height: 84px; }
  #security-controller .img-container {
    position: relative;
    width: 100%;
    height: 84px;
    text-align: left; }
    #security-controller .img-container img {
      position: absolute;
      top: 10px;
      left: 16px;
      float: left;
      width: 64px;
      height: 64px; }
    #security-controller .img-container .right-body {
      position: relative;
      width: 85%;
      height: inherit;
      padding-left: 126px;
      color: #2cc17b;
      font-size: 16px;
      line-height: 84px; }
  #security-controller .security-body {
    width: 100%;
    height: 84px; }
    #security-controller .security-body .text-div {
      float: left;
      width: 70%;
      height: 84px;
      font-size: 15px;
      line-height: 84px;
      color: #2cc17b;
      padding-left: 84px;
      background-image: url(img/home/security.png);
      background-repeat: no-repeat;
      background-size: 50px 50px;
      background-position: 12px center; }
    #security-controller .security-body .ico-div {
      float: left;
      width: 30%;
      height: 84px; }
      #security-controller .security-body .ico-div .setting, #security-controller .security-body .ico-div .record {
        height: 84px;
        float: left;
        width: 50%;
        font-size: 26px;
        text-align: center;
        color: #2cc17b;
        line-height: 30px; }
      #security-controller .security-body .ico-div .setting {
        padding: 27px 0 27px; }
      #security-controller .security-body .ico-div .record {
        padding: 27px 0 27px; }

#security-active {
  background-color: #f0f0f0; }
  #security-active .block-div {
    width: 90%;
    margin: 20px 5% 10px;
    height: 60px;
    border-radius: 3px; }
    #security-active .block-div .left {
      display: inline-block;
      float: left;
      width: 30%;
      height: inherit;
      text-align: right;
      font-size: 18px;
      line-height: 60px; }
    #security-active .block-div .right {
      display: inline-block;
      float: left;
      width: 70%;
      height: inherit; }
      #security-active .block-div .right input {
        width: 100%;
        padding: 0 20px;
        height: inherit;
        color: inherit;
        background-color: inherit;
        border: none;
        font-size: 18px;
        line-height: 60px; }
  #security-active .dark {
    background-color: #aaa;
    color: white; }
  #security-active .light {
    background-color: white;
    color: #282828; }
  #security-active .blue {
    background-color: #2cc17b;
    color: white;
    text-align: center;
    font-size: 22px;
    line-height: 60px; }
  #security-active .mar-top {
    margin-top: 40px; }

#security-record {
  background-color: #e5e5e5; }
  #security-record .time-div {
    width: 92%;
    border: 1px solid #bbb;
    border-radius: 3px;
    height: 44px;
    padding: 10px 0;
    background-color: white;
    color: #282828; }
    #security-record .time-div .text-div {
      width: 35%;
      float: left;
      font-size: 16px;
      padding-left: 30px;
      padding-right: 5px;
      text-align: center;
      line-height: 24px;
      border-right: 1px solid #666;
      height: 24px;
      background-image: url('img/time.png');
      background-position: 10px center;
      background-size: 20px 20px;
      background-repeat: no-repeat; }
    #security-record .time-div .ipt-div {
      float: left;
      width: 65%;
      padding: 0 10px;
      height: 24px;
      font-size: 16px;
      line-height: 24px; }
      #security-record .time-div .ipt-div input {
        width: 100%;
        line-height: 24px;
        padding-top: 0;
        font-size: 16px;
        height: 24px;
        border: 0;
        -webkit-box-shadow: 0;
                box-shadow: 0; }
    #security-record .time-div .button {
      min-height: 0;
      border: 0;
      background-color: inherit; }
  #security-record .search-btn {
    width: 92%;
    margin: 20px 4% 0;
    height: 44px;
    padding: 10px 0;
    color: white;
    text-align: center;
    border-radius: 3px;
    font-size: 18px;
    line-height: 24px; }
  #security-record .search-btn.button-disable {
    background-color: #c6c6c6; }
  #security-record .search-btn.button-enable {
    background-color: #2cc17b; }
  #security-record .record-list {
    margin: 20px 4% 40px;
    height: auto;
    padding-bottom: 40px;
    background-color: white;
    border-radius: 3px; }
    #security-record .record-list .title, #security-record .record-list .record {
      width: 100%;
      padding: 5px 10px;
      font-size: 16px;
      border-bottom: 1px solid #aaa;
      clear: both;
      overflow: hidden; }
      #security-record .record-list .title .fname, #security-record .record-list .record .fname {
        width: 20%;
        height: auto; }
      #security-record .record-list .title .fbegin, #security-record .record-list .title .fend, #security-record .record-list .record .fbegin, #security-record .record-list .record .fend {
        width: 40%; }
      #security-record .record-list .title .fname, #security-record .record-list .title .fbegin, #security-record .record-list .title .fend, #security-record .record-list .record .fname, #security-record .record-list .record .fbegin, #security-record .record-list .record .fend {
        padding-right: 10px;
        float: left;
        height: auto; }
    #security-record .record-list .record:active {
      background-color: #c0f1d2; }

#sense-circuit {
  background-color: #e5e5e5; }
  #sense-circuit .device {
    margin-top: 15px;
    height: 40px;
    font-size: 22px; }
    #sense-circuit .device span {
      position: relative;
      color: #282828;
      left: 25px;
      top: 5px; }
  #sense-circuit .toggle-visible {
    float: right;
    right: 40px;
    position: relative;
    z-index: 99;
    top: 22px;
    font-size: 20px; }
  #sense-circuit .area-container {
    padding: 5px 16px; }
    #sense-circuit .area-container .title-text {
      color: #c99065;
      font-weight: bold;
      font-size: 20px; }
    #sense-circuit .area-container .area {
      color: #282828;
      padding-left: 16px; }
      #sense-circuit .area-container .area .one-line {
        padding: 5px 5px; }
        #sense-circuit .area-container .area .one-line img {
          padding-right: 16px;
          height: 15px;
          vertical-align: text-top; }
        #sense-circuit .area-container .area .one-line .on {
          -webkit-transform: rotate(90deg);
                  transform: rotate(90deg); }
      #sense-circuit .area-container .area .count {
        float: right;
        padding-right: 16px; }
      #sense-circuit .area-container .area .attr {
        padding-left: 16px;
        margin-top: 5px; }
  #sense-circuit .no-device-message {
    padding: 20px 20px 0;
    height: 50px;
    text-align: center;
    font-size: 22px;
    color: #282828;
    line-height: 30px; }
    #sense-circuit .no-device-message a {
      color: #2cc17b;
      text-decoration: underline; }
  #sense-circuit .not-visible .oname {
    color: white; }
  #sense-circuit .not-visible div {
    background: #999; }
  #sense-circuit .light-bg-div {
    margin: 20px 20px 0 20px;
    background-color: white; }

#settings, #personal-settings {
  background-color: white; }
  #settings .btndev, #personal-settings .btndev {
    width: 100%;
    position: relative;
    background-color: white;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    height: 64px;
    padding: 18px;
    line-height: normal;
    color: #282828;
    text-align: left;
    font-size: 16px; }
    #settings .btndev span, #personal-settings .btndev span {
      display: inline-block;
      height: 28px;
      line-height: 28px; }
    #settings .btndev .arrow, #personal-settings .btndev .arrow {
      position: absolute;
      right: 20px;
      top: 0;
      color: #c6c6c6;
      font-size: 30px;
      width: auto;
      height: 60px;
      line-height: 60px; }
    #settings .btndev .icon, #personal-settings .btndev .icon {
      width: 28px;
      height: 28px;
      margin-right: 10px;
      background-repeat: no-repeat;
      background-size: cover; }
    #settings .btndev .login-icon, #personal-settings .btndev .login-icon {
      background-image: url('img/self/login_icon.png'); }
    #settings .btndev .set-icon, #personal-settings .btndev .set-icon {
      background-image: url('img/self/set_icon.png'); }
    #settings .btndev .reset-icon, #personal-settings .btndev .reset-icon {
      background-image: url('img/self/reset_icon.png'); }
    #settings .btndev .filter-icon, #personal-settings .btndev .filter-icon {
      background-image: url('img/self/filter_icon.png'); }
    #settings .btndev .pwd-icon, #personal-settings .btndev .pwd-icon {
      background-image: url('img/self/pwd_icon.png'); }
    #settings .btndev .recovery-icon, #personal-settings .btndev .recovery-icon {
      background-image: url('img/self/recovery_icon.png'); }
  #settings .logined, #personal-settings .logined {
    color: #2cc17b; }
  #settings .ion-ios-cloud-download, #settings .ion-ios-cloud-upload, #personal-settings .ion-ios-cloud-download, #personal-settings .ion-ios-cloud-upload {
    color: #c6c6c6;
    vertical-align: text-bottom; }

#register {
  background: #fff; }
  #register ion-content {
    padding: 0; }
  #register .bar-calm {
    background: transparent; }
    #register .bar-calm .button {
      background: transparent;
      border: 0;
      color: #2cc17b; }
  #register .logo {
    position: relative;
    width: 100%;
    height: 200px;
    background-position: center;
    background-image: url('img/z-logo.png');
    background-size: 100px 100px;
    background-repeat: no-repeat; }
  #register .input-div {
    margin-left: 10%;
    width: 80%;
    height: 54px; }
    #register .input-div input {
      width: 100%;
      color: #ccc;
      line-height: 54px;
      font-size: 18px;
      height: inherit;
      padding-left: 60px;
      border-radius: 5px;
      border: 1px solid #aaa;
      background-size: 18px 18px;
      background-repeat: no-repeat;
      background-position: 20px center; }
    #register .input-div .username {
      background-image: url('img/login/username_icon.png'); }
    #register .input-div .pwd {
      background-image: url('img/login/pwd_icon.png'); }
    #register .input-div ::-webkit-input-placeholder {
      color: #ccc; }
  #register .reg-btn {
    width: 80%;
    margin: 15% 10% 0;
    background-color: #2cc17b;
    border-radius: 5px;
    height: 40px;
    font-size: 20px;
    color: #fff;
    line-height: 40px;
    text-align: center; }

#slider-bar .edit {
  width: 30%;
  display: inline-block;
  text-align: center; }
#slider-bar .zero {
  color: #c99065;
  position: absolute; }
#slider-bar .end-value {
  color: #c99065;
  position: absolute;
  right: 10px; }
#slider-bar .divider {
  width: 100%;
  margin-top: 8px;
  background: #fff;
  height: 20px;
  border: 1px solid #fff;
  margin-bottom: -20px; }
#slider-bar input {
  margin: 22px 0; }
#slider-bar input[type=range] {
  -webkit-appearance: none; }
#slider-bar input[type=range].end {
  margin-top: 22px;
  height: 0px; }
#slider-bar input[type=range].start {
  height: 0px; }
#slider-bar input[type=range]:focus {
  outline: none; }
#slider-bar input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s; }
#slider-bar input[type=range]::-webkit-slider-thumb {
  height: 30px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: center;
  cursor: pointer;
  -webkit-appearance: none; }
#slider-bar input[type=range].start::-webkit-slider-thumb {
  background: #c99065; }
#slider-bar input[type=range].end::-webkit-slider-thumb {
  background: #444; }
#slider-bar input[type=range]:focus::-webkit-slider-runnable-track {
  background: red; }
#slider-bar span {
  color: #fff;
  display: inline-block; }

.swiper-x {
  background: #36353a;
  white-space: nowrap;
  color: #fff;
  padding-top: 15px; }
  .swiper-x .col {
    padding: 5px 5px 0 5px; }
  .swiper-x .class-container {
    display: inline-block;
    border-right: 1px solid #acacac; }
    .swiper-x .class-container span {
      display: inline-block;
      text-align: center;
      padding: 5px 15px;
      border-radius: 5px; }
  .swiper-x .animation-div {
    margin-top: 5px;
    background: #acacac;
    height: 1px;
    width: 100%;
    left: 0;
    position: relative;
    -webkit-transition: all 0.5s;
            transition: all 0.5s; }

.area-modal .modal-filter {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
  z-index: 30; }
.area-modal .modal-body {
  position: fixed;
  z-index: 31;
  width: 90%;
  top: 10%;
  height: auto;
  max-height: 80%;
  min-height: 40%;
  left: 5%;
  background-color: #e5e5e5; }
  .area-modal .modal-body .modal-title {
    background-color: #2cc17b;
    text-align: center;
    font-size: 16px;
    color: white;
    line-height: 32px; }
.area-modal .save-btn {
  width: 30%;
  margin: 20px 35%;
  height: 36px;
  font-size: 16px;
  color: white;
  text-align: center;
  background-color: #2cc17b;
  border-radius: 5px;
  line-height: 36px; }
.area-modal .father-line {
  width: 100%;
  position: relative;
  height: 40px;
  font-size: 15px;
  padding: 0 12px;
  line-height: 40px;
  color: #282828; }
.area-modal .child-line {
  width: 100%;
  position: relative;
  height: 40px;
  font-size: 15px;
  padding: 0 12px 0 20px;
  line-height: 40px;
  color: #282828; }
  .area-modal .child-line .area-name {
    background-size: 30px 30px;
    background-position: 8px center;
    background-repeat: no-repeat;
    padding-left: 48px; }
.area-modal .area-name {
  width: 100%;
  height: inherit;
  border-bottom: 1px solid #ccc; }
.area-modal .checked {
  background-color: #c0f1d2 !important; }
.area-modal .area-check {
  position: absolute;
  top: 10px;
  right: 24px;
  display: block;
  color: #2cc17b;
  font-size: 20px;
  line-height: normal; }
.area-modal .list-div {
  background-color: white;
  width: 90%;
  margin: 20px 5% 0; }
  .area-modal .list-div .child-line:last-child .area-name {
    border-bottom: none !important; }
.area-modal .modal-content {
  width: 100%;
  max-height: 60vh; }
.area-modal .no-bord-btm {
  border-bottom: none !important; }

.contact-modal .modal-filter {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
  z-index: 30; }
.contact-modal .modal-body {
  position: fixed;
  z-index: 31;
  width: 200px;
  top: 50%;
  left: 50%;
  height: 80px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: white;
  color: #2cc17b;
  border-radius: 5px; }
.contact-modal .contact-div {
  margin-top: 28px;
  text-align: center;
  line-height: 20px;
  font-size: 16px;
  height: 24px; }
.contact-modal .contact-div2 {
  text-align: center;
  font-size: 22px;
  height: 24px; }

#add-device {
  background-color: #e0e0e0; }
  #add-device .filter-explain-text {
    -webkit-animation: none;
            animation: none; }
  #add-device .btndev {
    background-color: #353a40;
    color: white;
    border: none; }
  #add-device .head-button {
    border: none;
    background-color: #242328;
    color: white; }
  #add-device .container {
    position: relative;
    width: 100%;
    padding: 0 5%;
    height: auto;
    margin: 0;
    background-color: #f0f0f0;
    overflow: hidden; }
  #add-device p {
    margin-top: 10px;
    text-align: center;
    height: 35px;
    font-size: 18px;
    line-height: 35px;
    color: #282828; }
    #add-device p .icon {
      padding-right: 2px; }
  #add-device .double-div {
    height: auto; }
    #add-device .double-div .check-span {
      height: 32px;
      color: white; }
    #add-device .double-div .body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 50px; }
    #add-device .double-div input:checked + .track {
      background-color: #2cc17b; }
    #add-device .double-div .checked-span {
      background-color: #ccc; }
  #add-device .add-div {
    position: fixed;
    bottom: 35px;
    left: 35%;
    padding: 0 20px;
    width: 30%;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 2px;
    color: white;
    border-radius: 20px;
    background-color: #2cc17b; }
    #add-device .add-div .add-icon {
      background-image: url('img/add_ico.png');
      background-size: cover;
      position: relative;
      top: 2px;
      margin-right: 10px;
      display: inline-block;
      width: 20px;
      height: 20px; }
  #add-device .type-container {
    width: 100%;
    padding: 0;
    height: auto;
    background-color: #c3b091; }
    #add-device .type-container .selected {
      background-color: #a39071; }
  #add-device .triple-div {
    height: 50px;
    padding: 5px 5px; }
    #add-device .triple-div .device-type {
      color: white;
      font-size: 15px;
      background-color: black;
      border-radius: 20px;
      line-height: 40px;
      text-align: center; }
  #add-device .typebd-container {
    width: 90%;
    margin: 20px 5%;
    border: 1px solid #ccc;
    padding: 10px 5px;
    background-color: white; }
    #add-device .typebd-container .selected .device-type {
      background-color: #2cc17b; }
  #add-device .devicebd-container {
    width: 90%;
    margin: 0 5%; }
    #add-device .devicebd-container .double-div:nth-child(odd) {
      padding: 0 5px 5px 0; }
    #add-device .devicebd-container .double-div:nth-child(even) {
      padding: 0 0 5px 5px; }
  #add-device .bdbtm {
    border-top: 5px solid #2cc17b; }
  #add-device .nodev-notice {
    text-align: center;
    font-size: 16px;
    color: #444;
    padding: 30px 0; }

#switch-element {
  background: white;
  text-align: center;
  float: left;
  width: 100%;
  margin-bottom: 10px; }
  #switch-element .off {
    border: 1px solid #353a40; }
  #switch-element .on {
    border: 1px solid #fff; }
  #switch-element .name {
    color: #282828;
    line-height: 20px;
    font-size: 16px; }
  #switch-element .icon {
    position: relative;
    width: 100%;
    padding: 10px 0px; }
    #switch-element .icon img {
      width: 40px;
      height: 40px; }
  #switch-element .input-box {
    width: 50px;
    height: 30px; }
  #switch-element .input-div {
    position: relative;
    left: 26px; }
  #switch-element .check-off {
    position: relative;
    background-image: url(img/check-off.png);
    background-size: 100%;
    width: 25px;
    height: 25px;
    bottom: 5px;
    left: 100%;
    -webkit-transform: translateX(-120%);
            transform: translateX(-120%); }
  #switch-element .check-on {
    position: relative;
    background-image: url(img/check-on.png);
    background-size: 100%;
    width: 25px;
    height: 25px;
    bottom: 5px;
    left: 100%;
    -webkit-transform: translateX(-120%);
            transform: translateX(-120%); }
  #switch-element .headOption {
    display: block;
    height: 44px;
    width: 100%;
    line-height: 44px;
    border-bottom: 1px solid #ccc; }
    #switch-element .headOption .ion-android-checkbox {
      min-width: 0;
      float: left;
      width: 50%;
      text-align: center;
      color: #71747b;
      font-size: 30px;
      background: transparent;
      border: 0; }
    #switch-element .headOption .ion-compose {
      text-align: center;
      float: left;
      display: inline-block;
      width: 20%;
      color: #ccc;
      font-size: 28px;
      background: transparent;
      border: 0; }
    #switch-element .headOption .name-text {
      display: inline-block;
      float: left;
      width: 60%;
      padding-left: 10px;
      font-size: 16px;
      height: 44px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center; }
    #switch-element .headOption .chk-item {
      float: left;
      width: 20%;
      display: inline-block;
      font-size: 28px;
      text-align: right;
      color: #999;
      background: transparent;
      border: 0; }
    #switch-element .headOption .selected {
      color: #2cc17b; }

#type-select {
  background-color: #353a40; }
  #type-select .button {
    font-size: 18px; }
  #type-select .btndev {
    background-color: #353a40;
    color: white;
    border: none; }
  #type-select .head-button {
    border: none;
    background-color: #242328;
    color: white; }

#security-pwd-change {
  background-color: #f0f0f0; }
  #security-pwd-change .block-div {
    width: 90%;
    margin: 20px 5% 10px;
    height: 60px;
    border-radius: 3px; }
    #security-pwd-change .block-div .left {
      display: inline-block;
      float: left;
      width: 30%;
      height: inherit;
      text-align: right;
      font-size: 20px;
      line-height: 60px; }
    #security-pwd-change .block-div .right {
      display: inline-block;
      float: left;
      width: 70%;
      height: inherit; }
      #security-pwd-change .block-div .right input {
        width: 100%;
        padding: 0 20px;
        height: inherit;
        color: inherit;
        background-color: inherit;
        border: none;
        font-size: 20px;
        line-height: 60px; }
  #security-pwd-change .dark {
    background-color: #aaa;
    color: white; }
  #security-pwd-change .light {
    background-color: white;
    color: #282828; }
  #security-pwd-change .blue {
    background-color: #2cc17b;
    color: white;
    text-align: center;
    font-size: 24px;
    line-height: 60px; }
  #security-pwd-change .mar-top {
    margin-top: 40px; }
